jquery中的on()函数不起作用

Question

我正在使用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()建议的功能.但它没有用.这是我的代码的小提琴.如果我错了,请纠正我.

Answer 1

这不是.on()有效的方法,如果你是动态创建元素,就不能将事件处理程序绑定到它,因为在代码运行时(document.ready),元素不存在.因此,要"绕过"它,将事件绑定到父元素(存在),然后将您要点击的实际元素添加为如下参数:

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

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

DEMO

Answer 2

您应该设置事件委派#result,因为当您尝试设置单击处理程序时#share,元素本身尚未添加.

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

尽量不要将事件处理程序绑定到$(document)默认情况下; 不会被删除的最接近的元素是主要候选者.

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

更新

每按一下按钮,您就会附加带有固定标识符的元素; 请注意,标识符对于每个文档应该是唯一的,因此您应确保最多执行一次该操作.