jQuery将数据绑定到动态创建对象的click事件

Question

下面的脚本动态创建按钮和事件。 我想将数据绑定到click事件。 但是bind（）函数失败，单击事件将不会触发。 无论如何，如果我使用on（）函数，则会成功触发click事件。

http://jsfiddle.net/hzLv1r6s/2/

    function showMessage(evt) {
        alert(evt.data.message);
    }

$(document).ready(function () {
    var activeDiv;
    var pVar = { message:'Hello from a paragraph'};
    $("a").on("click", function () {

        if (activeDiv === $(this).attr('id')) {
            $('#__div').hide('slow');
            activeDiv = '';
            return;
        }
        $('.box1').empty();
        var guts = 
            '<div id="__div" style="display:none;">' +
            '<input type="text" id="__text" value="' + $(this).attr('data-content') + '"/><br>' +
            '<button id="__internal" value="aaa">Submit</button>' +
        '</div>';

        //this one doesn't work on click event
        $('#__internal').bind('click',pVar,showMessage);

        $($.trim(guts)).appendTo('.box1');
        $('#__div').show('slow');
        activeDiv = ($(this).attr('id'));
    });

    /*
    //this one does work on click event
    $('.box1').on('click','#__internal',function(event){
       //alert(event.target.value);
        alert($('#__text').val());
    });
    */

});

Answer 1

您需要在这种情况下使用event delegation ，

 $('.box1').on('click','#__internal' , showMessage);

或者，在将该html字符串附加到DOM之后，尝试将事件绑定到该事件。

 $($.trim(guts)).appendTo('.box1');
 $('#__internal').bind('click',pVar,showMessage);

注意：但是我不知道您为什么拒绝在这里使用事件委托。

DEMO创建时没有事件委托。