Question

我正在尝试显示一个表单，点击#createbook，然后通过AJAX提交表单。出于测试目的，我试图在点击#addme时提醒hello world但它不起作用。但是当我在浏览器上输入on click功能时它可以工作。你能帮我解决这个问题。谢谢。：）

<div id="mode" style="display:none">

</div>

<script>
    $("#createbook").click(function () {
        $.get("BooksLibrary/Create #create", function (data) {
            $("#mode").html(data + '<button class="btn btn-primary" id="addme">Add Book</button>');
        });
        $("#mode").dialog({
            modal: true,
            title:'Add Book'
        });
        $("#mode").css({ "display": "block" });
    });


    $("#addme").click(function () {
        alert("hello world");
    });
</script>

Answer 1

由于您的#addme元素是动态添加的（创建click事件时不存在），您需要将事件委托给创建事件时存在的元素。我们可以使用jQuery's on() method：

执行此操作

$('#mode').on('click', '#addme', function() {
    alert("hello world");
});

jQuery的网站有一个名为Understanding Event Delegation的精彩部分。第一段以一种希望易于理解的方式解释了这一点：

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

Jquery函数未被调用

1 个答案: