【问题标题】:jquery button event function to target button by IDjquery按钮事件函数按ID定位按钮
【发布时间】:2013-09-03 15:40:43
【问题描述】:

我有一个充满 div 的页面,每个 div 包含一个按钮,每个按钮提交以成功执行某个功能。

但是,我目前正在尝试通过 ID 隔离按钮并触发将类和消息添加到 div 内的 2 个位置(输入值和#msgsC)。

但是,事件根本没有触发。我想我可能会遗漏一些东西。如何让它仅将类和消息更改/添加到单击的特定按钮的同级输入标签和#msgsC(而不是同时添加到页面上所有 div 中的所有输入)?

<form id="Hello" target="somePlace" action="#" method="post">
    <table>
        <tr>
            <td>
                <select name="os0">
                    <option value="item1">item1</option>
                    <option value="item2">item2</option>
                    <option value="item3">item3</option>
                    <option value="item1">item4</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="hidden" name="on1" value="Send My URL"/>Send My URL
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" value="http://" name="os1" id="os1" maxlength="200"/>
            </td>
        </tr>
    </table>
    <button alt="Click the button" id="purchase1" name="submit" class="btn" type="image">Add To Cart</button>
</form>




$(document).ready(function () {
    $('#purchase1, #purchase2, #purchase3').on('click', 'button', function (e) {
        var urlGo = new Array(url1, url2, url3);

        for (var x = 0; x < urlGo.length; x++) {

            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(urlGo[x].val())) {
                $(this).siblings("input[type=text]").addClass("errorAlert");
                $(this).siblings("input[type=text]").val(emptyerror);
                $(this).siblings("#msgsC").addClass("text-error");
                $(this).siblings("#msgsC").html(htmlEmpty);

            } //end of if
        } //end of for
    }); // end of purchase button function
}); // end document ready

【问题讨论】:

  • 没有类purchase1、2或3的元素
  • # 表示一个 ID,. 表示一个类。将您的选择器更改为$('#purchase1, #purchase2, #purchase3') 并删除'button',因为它们按钮

标签: jquery function events siblings


【解决方案1】:

. 是一个类,# 是一个 id。

.purchase选择类购买元素,#purchase选择id购买元素。

使用

$('#purchase1, #purchase2, #purchase3').on(...

因为 purchase1、purchase2、purchase3 是 id。

如果你只对点击感兴趣并且这些元素被加载一次并且没有被替换或删除,你也可以使用,

$('#purchase1, #purchase2, #purchase3').click(function(){..

你也可以给他们一个通用的类,“purchase”。

然后使用,

$('.purchase').click(function(){  ....});

但请记住,id 是独一无二的。

【讨论】:

  • 好的,谢谢。我一直在做很多改变,希望能找出问题所在。我才刚刚意识到我可能不小心把这些作为类而不是 ids 离开了(doh!)。所以我回来纠正它。但是,我将类更改为 ID,但它仍然无法正常工作。我在某处看到按钮标签只会响应 on('click', 'button' function(){});但我也没有运气。我会继续努力的。
  • 我能够更改类并且输入和跨度标签现在反映了正确的消息。但我希望这些按钮能够根据按下的按钮来影响每个 div 的文本输入和 #msgsC span 标签。例如,按下按钮 2 应该只影响 div 2 的跨度和输入。但是,现在,所有三个 div 的元素都在响应。我正在考虑按钮事件如何对此有所帮助。感谢您的意见它让我朝着正确的方向前进。
  • 在这个特定的 sn-p 上不需要更多帮助。事实上,我确实想通了,并且很乐意发布新代码作为我的问题的答案,以便其他任何发现它有用的人都可以使用。我唯一需要做的就是知道如何将它压缩成一个不那么笨重的版本。感谢您的帮助。
  • 这篇当前帖子旨在帮助动态获取元素 ID 并为其提供错误消息。现在已经解决了,所以我不得不为这个浓缩的问题创建一个新帖子。这是带有代码的较新帖子:stackoverflow.com/questions/18658872/…
猜你喜欢
  • 1970-01-01
  • 2016-08-12
  • 1970-01-01
  • 2019-04-29
  • 1970-01-01
  • 1970-01-01
  • 2018-06-25
  • 2011-07-21
  • 1970-01-01
相关资源
最近更新 更多