Question

我想使用html（） - function。

为当前页面添加一个按钮

此按钮需要可选，并在单击时发出警报（“点击”）。这似乎不可能。

看看这段代码

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(event){
        $('div').html('<form method="post" action=""><input type="submit" /></form>');
        event.preventDefault();
    }); 
    $(':submit').click(function(event){
        event.preventDefault();
        alert('click');
    });
});
</script>


<a href="#">Click here to add button</a>
<div>Here</div>

我想要的是能够点击<a href="#">Click here to add button</a>。 Jquery使用$('div').html('<form method="post" action=""><input type="submit" /></form>');用提交按钮替换div。

我想要发生的是点击提交按钮以触发alert('click')。但这并没有发生。

任何想法为什么？

谢谢，
的Marius

Answer 1

event delegation或live使用delegate。 E.g：

$(':submit').live("click", function(event){

live将：

为所有人附加一个处理程序与当前相匹配的元素选择器，现在或将来。

因此，无论何时附加所述处理程序，附加到以编程方式注入DOM的元素的事件处理程序都将起作用。

Answer 2

您需要使用jquery live来添加click事件。

住：

$(':submit').live("click", function(event){
    event.preventDefault();
    alert('click');
});

Answer 3

我强烈建议您在添加/删除dom对象时使用jQuery DOM

<强> http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype

使用jquery DOM的解决方案

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(event){
        var submitDOM = $.FORM(({ method: "post", action: ""}, 
                            submit = $.INPUT({ type: "submit" })
                        );

        $(submit).click(function() {
            alert("click"); 
            return false;
        });

        $('div').append(submitDOM);
    }); 
});
</script>


<a href="#">Click here to add button</a>
<div>Here</div>

Answer 4

使用bind()时，它会立即将处理程序附加到选择器返回的元素集。

因此，在文档就绪时，$(":submit")将返回零元素，因为DOM中没有提交类型的元素（请参阅http://api.jquery.com/submit-selector/）。此时，您的处理程序不会附加任何内容。稍后，当您单击该链接并添加表单和子提交按钮时，它仍然附加了默认的事件处理程序。

要获得所需的行为，您有两种选择。

一种是将处理程序附加到$('a').click()处理程序中的提交按钮，而不是在document.ready期间评估选择器。

另一方面，正如karim79建议的那样，使用.live()（请参阅http://api.jquery.com/live/）或.delegate()（请参阅http://api.jquery.com/delegate/）懒惰地绑定到可能尚不存在的元素。

Jquery：添加提交按钮时，无法再次选择

4 个答案: