Question

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

    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 created without event delegation.

jquery绑定数据以动态创建对象的click事件

1 个答案: