Question

这是我的 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 和脚本不变。所以你明白，当我进一步点击时，我会得到一些奇怪的行为。

任何人都可以告诉我，我所做的事情是否良好，如果是，我的剧本会出现什么问题？

感谢。

EDIT1：

替换当前 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>

Answer 1

正如其他一些人所建议的，我建议将你的脚本移出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>

Answer 2

实际上，在经历了很多努力之后，我终于意识到这是一个部署问题。 jQuery 表现良好，但由于我的应用程序具有安全限制，它无法执行某些操作。它与整个申请有关。

在运行时替换jQuery和HTML

2 个答案: