Question

我有这种情况。在我的HTML页面中，点击a元素后，我会将一些HTML和jQuery内容加载为字符串，并更改div的内容（通过innerHTML）到这个新文本。

以下是jQuery代码：

<script type="text/javascript">
    $("a.accessor").click(function(event) {
        var cId = this.id;
        $.get("/video/" + cId)
        .done(function(data){
            var contentDiv = document.getElementById("navigator");
            contentDiv.innerHTML = data;
        })
        .fail(function(data) {
            alert("An error occured during request. Please try again later!");
        });
    });
</script>

问题是，在运行此jQuery代码后，新的jQuery代码（替换此代码）不响应。

Bellow是我得到的新HTML/jQuery代码：

<div class="breadcrumb">
    <a href="/video">Competitors</a>
    <span>&gt;</span>
    <a href="#">Name</a>
</div>
<div class="video-browser">
    @for(v <- competitor.getVideos()) {
        <div class="folder">
            <a id="@(competitor.getId())_@v.getId()" class="accessor">
                <img src="@routes.Assets.at("images/movie_file.png")" />
                <span>@v.getVideoName()</span>
            </a>
        </div>
}
<script type="text/javascript">
    $("a.accessor").click(function(event) {
        alert(123);
    });
</script>

Obs。为了简洁起见，我使用了一些与我的框架相关的代码。

上面有HTML/jQuery，当我尝试点击a元素时，我什么都没得到。谁能解释一下为什么会这样？

如果您需要更多详情，请向我索取。

提前致谢！

Answer 1

将您的脚本更改为此...

<script type="text/javascript">
    $("a.accessor").click(function(event) {
        var cId = this.id;
        $.get("/video/" + cId)
            .done(function(data){
                $("#navigator").html(data);
            })
            .fail(function(data) {
                alert("An error occured during request. Please try again later!");
            });
    });
</script>

它使用jQuery的html()方法添加新的html（和脚本），这将执行脚本，与之前使用的方法不同。

Answer 2

这是因为您的点击事件处理程序未初始化。您需要将其包装在文档就绪块中。但是......

<script type="text/javascript">
$(function(){
    $("a.accessor").click(function(event) {
        alert(123);
    });
});
</script>

不会因为a标签不在DOM中而工作。更好地使用委托。这将为.accessor中的所有标记添加一个单击处理程序，以及将来添加时。将此代码放在主html中。

$(function(){
    $(".accessor").on('click', 'a',function(event) {
        alert(123);
    });
});

异步加载的jQuery脚本不起作用

2 个答案: