javascript没有'在jquery.load之后无法工作

javascript doesn't work after jquery .load

本文关键字：之后 load 工作 jquery 没有 javascript      更新时间：2023-09-26

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

  1. 列表视图
  2. 分区ID=子视图
  3. 两个复印按钮

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

我做到了。复制功能正在运行，禁用样式在这两个按钮上也运行良好。

列表视图的每一行都有一个链接。如果用户点击该链接，我想使用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>

这是jjj.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中完全正常。

请帮助

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

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

创建一个正文如下的html页面：

<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>
相关文章：