3

我正在使用 jQuery 制作动态按钮。现在我想将此按钮用作任何其他按钮。这是我的 HTML：

<label class='twobuttons'><div id="submit-button" >GO!</div></label>
<div id='result'></div>

这是我的 JavaScript：

$(document).ready(function(){
    $('#submit-button').click(function(){
        $('#result').append("<label><div id='share' class='longbutton'>Share this route</div></label>");

        $('#result').append("<label><div id='goback' class='longbutton'>Create another one !</div></label>");
    });

    $('#share').on("click",function(){
        alert('hi');
    });

    $('#goback').on("click",function(){
        alert('hello');
    })
});

我在这$('#share').on(部分特别有问题。

我尝试了这里on()建议的功能。但它不起作用。这是我的代码的小提琴。如果我在某处错了，请纠正我。

4

4 回答 4

6

这不是.on()工作原理，如果您正在动态创建元素，则无法将事件处理程序绑定到它，因为在代码运行时（document.ready），该元素不存在。因此，为了“解决”这个问题，您将事件绑定到父元素（存在），然后添加您将单击的实际元素作为参数，如下所示：

    $('body').on("click", "#share", function(){
        alert('hi');
    });

    $('body').on("click", "#goback",function(){
     alert('hello');
    })

演示

于 2013-06-11T15:38:00.693 回答
5

您应该改为设置事件委托#result，因为当您尝试设置点击处理程序时#share，元素本身尚未添加。

$('#result').on('click', '#share', function() {
    // your code here
});

尽量不要$(document)默认绑定事件处理程序；不会被删除的最接近的元素是主要候选者。

或者，仅在添加新元素后绑定单击处理程序。

更新

每次单击按钮时，您都会添加具有固定标识符的元素；请注意，每个文档的标识符应该是唯一的，因此您应该确保该操作最多执行一次。

于 2013-06-11T15:39:26.320 回答
3

.on() 方法的工作方式会根据您的使用方式而有所不同。在您的示例中， .on() 方法的行为类似于 bind 并且仅适用于已经存在的元素。
试试这个：

 $(document).on("click",'#share',function(){
              alert('hi');
          });

演示

于 2013-06-11T15:38:03.320 回答
2

使用是不够的.on()。document您必须将事件委托与动态创建的元素之前存在的元素（例如）一起使用：

$(document).on('click', '#share', function () {
    alert('hi');
});

（根据您的小提琴，您可以使用#result代替document。）

小提琴

于 2013-06-11T15:38:08.503 回答