javascript 在 jquery .load 之后不起作用答案

【问题标题】：javascript doesn't work after jquery .loadjavascript 在 jquery .load 之后不起作用
【发布时间】：2014-04-27 08:33:19
【问题描述】：

我有一个包含以下元素的default.aspx 页面：

列表视图
Div ID = 子视图
两个复制按钮

当用户点击这些按钮中的任何一个时，我想复制一些文本并禁用点击的按钮。

我做到了。复制功能正常工作，禁用样式在两个按钮上也正常工作。

列表视图的每一行都有一个链接。如果用户单击该链接，我想使用 jquery .load 函数加载另一个页面 subview.aspx 并将结果放入 div ID = subview

$('#subView').load('SubView.aspx?');

子视图页面还包含两个复制按钮。这些按钮可以复制正确的文本，但是，当用户单击其中任何一个按钮时，它们不会变为禁用状态。

我的代码

我在default.aspx 的顶部添加了zeroclipboard.js。这是 default.aspx 中的两个按钮：

   <button type="button" id="Button1" class="copyToBtn" type="button" data-clipboard-text="<%#Eval("Telephone")%>" title="Copy Phone">Copy Phone Number</button>
   <button type="button" id="Button3" class="copyToBtn" data-clipboard-text="<%#Eval("Surname")%>" title="Copy Surname">Copy Surname</button>
   <script type="text/javascript" src="zero/jjjj.js"></script>

这是 subview.aspx 中的两个按钮

<button type="button" id="Button1" class="copyToBtn" type="button" data-clipboard-text="<%#Eval("Telephone")%>"title="Copy Phone">Copy Phone Number</button>
<button type="button" id="Button3" class="copyToBtn" data-clipboard-text="<%#Eval("Surname")%>" title="Copy Surname">Copy Surname</button>
<script type="text/javascript" src="zero/jjjj.js"></script>

这是jjjj.js

var client = new ZeroClipboard(document.getElementById("Button1"), {
moviePath: "/zero/ZeroClipboard.swf"
});

client.on("load", function (client) {

client.on("complete", function (client, args) {

    $('.copyToBtn').each(function () {
        $(this).removeAttr('disabled').removeClass('ui-state-disabled');
    });

    if (this.id == "Button1") {
        $("#Button1").attr("disabled", "disabled");
    }
    else if (this.id == "Button3") {
        $("#Button3").attr("disabled", "disabled");
    }
    alert(this.id);
});
});

var client3 = new ZeroClipboard(document.getElementById("Button3"), {
moviePath: "/zero/ZeroClipboard.swf"
});

client3.on("load", function (client3) {

client3.on("complete", function (client3, args) {

    $('.copyToBtn').each(function () {
        $(this).removeAttr('disabled').removeClass('ui-state-disabled');
    });

    if (this.id == "Button1") {
        $("#Button1").attr("disabled", "disabled");
    }
    else if (this.id == "Button3") {
        $("#Button3").attr("disabled", "disabled");
    }
    alert(this.id);
});
});

请注意警报仅适用于 default.aspx，而不适用于 subview.aspx 认为复制功能在 subview 和 default 中完全正常。 aspx.

请帮忙

【问题讨论】：

你在哪里提到$('#subView').load('SubView.aspx?');？
我无法从您的描述中真正看出，但是如果您要替换 DOM 元素，那么这些 DOM 元素上的任何先前事件处理程序都将被清除（它们被附加到没有不再存在）。您要么必须将事件处理程序重新附加到新替换的 DOM 元素，要么切换到使用委托事件处理，在这种情况下您依赖事件传播并将事件附加到本身未被替换的父对象。
@samitha 当用户点击列表视图任意行内的链接时，会有一个脚本包含 .load
@jfriend00 我知道。这就是为什么我将jjjj.js 重新包含到 subview.aspx 中（如问题中所述）。此外，当我从 subview.axps 中删除该脚本时，复制按钮停止工作（即：停止复制文本）。
在我看来，依赖嵌入在动态加载的内容中的脚本是一种不好的做法。最好在页面中已有您需要的脚本，并在加载新内容后调用它们。正如我上面所说，我并没有真正了解您在做什么或您的描述中的问题是什么，所以只是想提供有用的信息。

标签： javascript jquery asp.net zeroclipboard

【解决方案1】：

我最好的猜测是问题在于主页中的按钮与子视图中的按钮具有相同的 id。 javascript 不知道要禁用哪个#Button1，旧的还是新的。 js还有很多其他问题。

【讨论】：

您建议更改 subview.aspx 中按钮的 ID。好的，我会尝试并更新您。但是请问脚本中的这些错误是什么？
我更改了 ID，但结果仍然相同，即复制按钮可以正常工作，但样式不可用。我相信这与 zeroclipboard 库有关

【解决方案2】：

我认为 jfriend00 已经回答了这个问题，但让我试一试：如果您正在动态添加新元素，您需要将事件处理程序附加到页面本身加载并解析 javascript 或重新附加处理程序时.这是一个类似于您想要做的工作示例...（确保您的 ZeroClipboard.min.js 文件和 .swf 文件位于您正在测试的根目录中，或相应地更改脚本标记）。

创建一个html页面，body如下：

<body>
    <button type="button" class="clip_button">Copy To Clipboard</button>
    <button type="button" class="clip_button">Copy This Too!</button>
    <!--new buttons will be appended inside the sublist div-->
    <div class="sublist">
    </div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.min.js"></script>
<script type="text/javascript">

$( document ).ready(function() {
        var client;

        // Create a function that sets up your Zero Clipboard Instance
        var fnSetUpZCB = function () {
            // Every time we run this function, it will attach the event handler to the buttons with the class clip_button
            client = new ZeroClipboard( $('.clip_button') );

            client.on( 'ready', function(event) {           
                client.on( 'copy', function(event) {
                    event.clipboardData.setData('text/plain', event.target.innerHTML);
                });

                // On aftercopy is where we can manipulate the object that was clicked using event.target (in this case to disable the clicked button)
                client.on( 'aftercopy', function(event) {
                    event.target.disabled = true;
                    console.log('Copied text to clipboard: ' + event.data['text/plain']);
                    ZeroClipboard.destroy();

                    //I'm just appending a new button here so you can see that the dynamic elements are indeed getting the handler attached.  You could run your load function here.

                    $('.sublist').append('<button class="clip_button">Copy This Also!</button>');

                    //And, finally, after we load the new elements, we have to run our set up again to reinitialize any new items.
                    fnSetUpZCB();
                });
            });

            client.on( 'error', function(event) {
                // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
                ZeroClipboard.destroy();
            });
        }

        $('document').on('load', fnSetUpZCB()); 

    });
</script>
</body>

【讨论】：