1

这是我的HTML和jQuery片段：

<div id="navigator">    
    <div class="breadcrumb">
        <a href="#">Competitors</a>
    </div>
    <div class="video-browser">
        <div class="folder">
            <a id="221" class="accessor">
                <img src="/assets/images/folder.png" />
                <span>Aron#1</span>
            </a>
        </div>
        <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>
    </div>
</div>

如您所见，当响应到来时，jquery 替换了HTML内容，但它也用其他一些脚本替换了自身（这是来自jQuery请求作为响应的内容）。所以首先我在视图页面中得到这个。问题是当我查看HTML源代码时，HTML和脚本没有改变。所以你明白，当我进一步点击时，我会得到一些奇怪的行为。

谁能告诉我我所做的是否好，如果是，我的脚本可能有什么问题？

谢谢。

编辑1：

替换当前HTML内容的响应是：

<div class="breadcrumb">
    <a href="/video">Competitors</a>
    <span>&gt;</span>
    <a href="#">Aron#1</a>
</div>
<div class="video-browser">
    <div class="folder">
        <a id="261_241" class="accessor">
            <img src="/assets/images/movie_file.png" />
            <span>test</span>
        </a>
    </div>

    <script type="text/javascript">
    $("a.accessor").click(function(event) {
        var compId = this.id.substring(0, this.id.indexOf("_"));
        var movieId = this.id.substring(this.id.indexOf("_") + 1);
        $.get("/video/" + compId + "/" + movieId)
            .done(function(data){
                $("#videoPlayerDiv").html(data).html();
            })
            .fail(function(data) {
                alert("An error occured during request. Please try again later!");
            });
        });
     </script>
</div>
4

2 回答 2

0

正如其他一些人所建议的那样，我建议将您的脚本移出 html。所以最初你可以有这样的东西：

<div id="navigator">    
    <div class="breadcrumb">
        <a href="#">Competitors</a>
    </div>
    <div class="video-browser">
        <div class="folder">
            <a id="221" class="accessor">
                <img src="/assets/images/folder.png" />
                <span>Aron#1</span>
            </a>
        </div>
    </div>
</div>

并且脚本带有 id 标记，但请查看您的响应数据中是否可以分别发送 HTML 部分和 JS 部分。然后你可以做我在下面显示的：

    <script type="text/javascript" id="replacableJS">
    $("a.accessor").click(function(event) {
        var cId = this.id;
        $.get("/video/" + cId)
        .done(function(data){
            $("#navigator").html(data.htmlPart); // NOTE:
            $("#replacableJS").text(data.jsPart); // NOTE:
        })
        .fail(function(data) {
            alert("An error occured during request. Please try again later!");
        });
    });
    </script>
于 2013-10-17T06:56:16.660 回答
0

实际上，经过一番挣扎后，我终于意识到这是部署的问题。jQuery表现良好，但由于我的应用程序的安全限制，它无法执行某些操作。它与整个应用程序有关。

于 2013-10-17T08:06:23.947 回答