Question

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

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

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

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

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

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

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

我的代码

我将zeroclipboard.js添加到default.aspx的顶部。这些是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 认为复制功能完全正常。 ASPX。

请帮助

Answer 1

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

Answer 2

我认为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>

在jquery .load之后javascript不起作用

我的代码

2 个答案: