将特定图片从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); 
}