jQuery .load后javascript無法正常工作

Question

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

列表顯示
分區ID =子視圖
兩個復制按鈕

當用戶單擊這些按鈕中的任何一個時，我要復制一些文本並使禁用的單擊按鈕。

我做到了 復制功能正常工作，兩個按鈕上的禁用樣式也正常工作。

列表視圖的每一行都有一個鏈接。 如果用戶點擊該鏈接，我想要加載其他頁面subview.aspx使用jQuery .load功能，並把結果的DIV ID =子視圖內

$('#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 中完全可以正常工作 。

請幫助

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 個解決方案

解決方案1
0 2014-04-27 08:43:15

解決方案2
0 2014-04-27 11:05:15

jQuery .load后javascript無法正常工作

問題描述

我的密碼

2 個解決方案

解決方案1 0 2014-04-27 08:43:15

解決方案2 0 2014-04-27 11:05:15

解決方案1
0 2014-04-27 08:43:15

解決方案2
0 2014-04-27 11:05:15