將特定圖片從div復制到另一個div，但更改onClick和ID

Question

我有下面的代碼：

function add_trade(elem)
{
    var myElement = $(elem);
    var img = myElement.clone();
    $('#chosen').append(img); 
}

<div id="trade">    
    <div id="chosen"></div>    
</div>          

<div id="page">         
    <div id="backpack">
        <img src="ex1.jpg" onclick="add_trade(this);">
        <img src="ex2.jpg" onclick="add_trade(this);">
    </div>      
</div>

現在可以正常工作了，我可以克隆圖像並將其放在“ CHOSEN”中。 問題是它復制了OnClick，我希望將其替換為另一個功能，因此他們可以單擊該克隆的圖像並將其從“選擇”的div中刪除。 這可能嗎？

Answer 1

我認為您應該刪除onClick屬性並使用click() 。 為了使其正常工作，您還必須使用.on()方法來跟蹤兩個容器中的更改。 因此，您的代碼可能如下所示：

<div id="trade">    
    <div id="chosen"></div>    
</div>          

<div id="page">         
    <div id="backpack">
        <img src="ex1.jpg">
        <img src="ex2.jpg">
    </div>      
</div>

<script type="text/javascript">
    $('#backpack').on('click', 'img', function() {
        var myElement = $(this);
        var img = myElement.clone();
        $('#chosen').append(img);
    });

    $('#chosen').on('click', 'img', function() {
        var myElement = $(this);
        var img = myElement.remove();
    });
</script>

Answer 2

您可以通過創建不克隆元素的方式以另一種方式進行操作。 嘗試這個

    function add_trade(elem)
    {
        var myElement = $(elem),
        elemSrc = element.src;

        var img = $('<img/ >', {
              src: elemSrc,
              onclick: "your function here";
           });
        $('#chosen').append(img); 
    }

或采用您的方法的解決方案：在追加之前，只需更改attr onclick

function add_trade(elem)
{
    var myElement = $(elem);
    var img = myElement.clone();
    $(img).attr('onclick', 'new function');


   $('#chosen').append(img); 
}