-1

我试图在单击#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>
4

1 回答 1

2

由于您的#addme元素是动态添加的（并且在您创建click事件时不存在），因此您需要将事件委托给创建事件时存在的元素。我们可以这样做，使用jQuery 的on()方法：

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

jQuery 的网站有一个很好的部分，题为“理解事件委托” 。第一段以一种希望易于理解的方式解释了这是什么：

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

于 2014-10-10T14:36:14.390 回答