Question

我在DOM中创建了两个按钮和一个文本字段。一切都很好但是当我在其中任何一个上调用点击方法时，没有人工作。 代码：

        var BB= document.createElement('input');
        BB.setAttribute('type','button');
        //BB.setAttribute('id','BB');
        BB.setAttribute('value','<<Back');
        BB.style.position="relative";
        BB.style.left="2";
        BB.id="BB";    

        var FB= document.createElement('input');
        FB.setAttribute('type','button');
        FB.setAttribute('id','FB');
        FB.setAttribute('value','Next>>');
        FB.style.position="relative";
        FB.style.left="5";

        var RT= document.createElement('input');
        RT.setAttribute('type','text');
        RT.setAttribute('value','10');
        RT.style.position="relative";
        RT.style.left="10";
        RT.style.width="45";
        RT.setAttribute('id','RT');
        RT.setAttribute('placeholder','Range');

        root.appendChild(BB);
        root.appendChild(FB);
        root.appendChild(RT);

功能

 $('#BB').click(function(){
        alert("back ");    
    });

    $('#FB').click(function(){
        alert("forward");    
    });

Answer 1

试试这个，

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

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

Answer 2

由于#BB,#FB元素是动态创建的，因此您需要使用事件委派来为这些元素注册事件处理程序。

试试这个

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


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

Answer 3

改变这个：

$('#BB').click(function(){
    alert("back ");    
});

$('#FB').click(function(){
    alert("forward");    
});

到此：

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

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

jQuery在开始时看到DOM。如果不重新初始化事件处理程序或设置为肯定存在的东西（如document），则无法将单击指定给不存在的内容。

Click事件不适用于DOM创建的元素

3 个答案: