javascript - 使用 jquery 插入后的按钮操作不起作用

Question

我有一个按钮“添加”我点击它然后保存按钮将附加到我的 div。这是有效的，但我无法触发“保存”按钮的功能。如果我将“保存”按钮直接粘贴到代码中，它就可以工作。我找不到我的错误...

<a class="save" href="#"><img src="images/save.png" alt="save_working" /></a>
<a class="add_row" href="#"><img src="images/icon_add_light.png" alt="add" /></a><br>
<div id="hinzu"></div>


$(".save").click(function() {
    alert("saveworking");
});


$(".add_row").click(function() {
    $("#hinzu").append('  <a class="save" href="#"><img src="images/save.png" alt="savenotworking" /></a>');
});

这是一个小提琴：http: //jsfiddle.net/MgcDU/321/

为什么这不能与 js append 方法一起使用？

Answer 1

它是动态的，因此在绑定事件时它不存在。为此，您需要将事件委托给在附加事件处理程序时实际存在的元素：

$("#hinzu").on('click', '.save', function() {
    alert("saveworking");
});

Answer 2

像这样使用它：

$("#hinzu").on('click', ".save", function() {
    alert("saveworking");
});

Answer 3

这是因为当您尝试执行 $(".save") 时，它不存在。

您必须使用 on() 来监视是否有任何新的 .save 在您的厄运中并分配事件处理程序。

$("#hinzu").on('click', '.save', function()
{
    alert("This Does work");
});

Answer 4

它不起作用，因为$(".save").click()调用将 onclick 处理程序绑定到所有具有save在调用点已经存在的类的元素。

要将事件处理程序也绑定到绑定时不存在的元素，您必须使用$(document).on('click', '.save', function() { [...] })

Answer 5

如果要保存代码，请使用：

<script type="text/javascript">
    $(function() {
        $('.save').click(function() {
            alert('saveworking');
        });
    });

    $(function() {
        $('.add_row').click(function() {
            alert('add_row');
        });
    });
</script>

另一种方法是：

<script type="text/javascript">
    $(document).ready(function () {
        $('.save').click(function () {
            alert('saveworking');
        });

        $('.add_row').click(function () {
            alert('add_row');
        });
    });
</script>