jQuery：Div與jQuery交換

頁面上有一個按鈕，其值爲「button1」。按下時，它必須刪除它自己並添加新值按鈕「button2」。當按下「button2」時，它必須刪除自己並添加「button1」。有點無限循環。jQuery：Div與jQuery交換

我知道它可以通過改變按鈕的值或至少使用「detach（）」函數來完成，但它是我目前試圖實現的網站中最簡單的問題我必須通過按鈕交換兩個「div」的完整數據。

所以，回到問題，事情是「button1」正常工作，「button2」什麼也不做。一些幫助將不勝感激。

的index.html

<!DOCTYPE html> 
<html> 

    <head> 
     <script src = "http://code.jquery.com/jquery-1.10.1.min.js"></script> 
     <script src = "script.js" type = "text/javascript"></script> 
    </head> 


    <body> 
     <div id = "div1"> 
      <input type = button id = "button1" value = "button1" /> 
     </div> 
    </body> 

</html>

的script.js

$(document).ready (function() { 
    $("#button1").click (function() { 
     $("body").append ("<div id = 'div2'></div>"); 
     $("#div2").append ("<input type = button id = 'button2' value = 'button2' />"); 
     $("#div1").remove(); 
    }); 

    $("#button2").click (function() { 
     $("body").append ("<div id = 'div1'></div>"); 
     $("#div1").append ("<input type = button id = 'button1' value = 'button1' />"); 
     $("#div2").remove(); 
    }); 

});

來源

2013-06-20 Kudayar Pirimbaev

#button2不響應點擊，因爲它是不存在的，在結合了click()時間事件。

您可以通過.on()

$(document).on('click', '#button1', function() { 
    .... 
}); 

$(document).on('click', '#button2', function() { 
    .... 
});

來源

2013-06-20 13:42:51 techfoobar

謝謝，我已經開始學習最近，很容易落在這樣愚蠢的錯誤 –

@KudayarPirimbaev - 必須學會以某種方式：） – tymeJV

是的，你是對的 –

更改綁定解決這個使用.on因爲元素被動態地添加：

$(document).on("click", "#button1", function() { 
    $("body").append ("<div id = 'div2'></div>"); 
    $("#div2").append ("<input type = button id = 'button2' value = 'button2' />"); 
    $("#div1").remove(); 
}); 

$(document).on("click", "#button2", function() { 
    $("body").append ("<div id = 'div1'></div>"); 
    $("#div1").append ("<input type = button id = 'button1' value = 'button1' />"); 
    $("#div2").remove(); 
});

來源

2013-06-20 13:43:30 tymeJV

您正在嘗試點擊處理程序附加到沒有按元素最初不存在，它不會附加到您的動態創建的元素。

嘗試使用on() jQuery的功能，或在更早的jQuery的版本中，live()功能，像這樣：

$(document).on("click", "#button1", function() { 
    (...) 
}); 

$(document).on("click", "#button2", function() { 
    (...) 
});

來源

2013-06-20 13:44:35

您將需要使用.on jQuery的功能。由於您是通過JavaScript創建div的，並且它不在DOM中。

同在這裏：https://stackoverflow.com/a/1207393/1165441

.live已被棄用，因此您可以忽略，除非你正在使用jQuery的舊版本。

來源

2013-06-20 13:46:07 edhedges

操作DOM時，連接到按鈕的事件處理程序不會再次附加。在頁面加載後你有類似的問題 - button2不存在，並且沒有點擊事件。

如果您重新DOM操作事件發生後它會工作：

function set_events() { 
    $("#button1").click (function() { 
     $("body").append ("<div id = 'div2'></div>"); 
     $("#div2").append ("<input type = button id = 'button2' value = 'button2' />"); 
     $("#div1").remove(); 
     set_events(); 
    }); 

    $("#button2").click (function() { 
     $("body").append ("<div id = 'div1'></div>"); 
     $("#div1").append ("<input type = button id = 'button1' value = 'button1' />"); 
     $("#div2").remove(); 
     set_events(); 
    }); 
} 

$(document).ready (function() { 
    set_events(); 
});

來源

2013-06-20 13:50:22 bbonev

jQuery：Div與jQuery交換

回答

相關問題