javascript - 按钮克隆上不需要的单击事件

[编辑]
演示-http://jsbin.com/wedohawuyu/3/edit?output

打开左侧的蓝色标签，然后将按钮置于绿色div，出现对话框，在其中放置一些东西，然后单击按钮。
以相同的方式拖动下一个蓝色按钮，但在对话框中更改值。单击。

现在两个按钮执行相同的操作，为什么？

[/编辑]

我有带有可拖动按钮的菜单，可以将其放在可排序的div中。可拖动对象设置为克隆。
当您在可排序的div中拖放可拖动的对象时，会出现对话框，您可以在其中放置一些文本。

我要完成的工作是使evey按钮显示不同的文本，但是当我将第一个按钮设置为显示“ qwe”，第二个按钮设置为“ asd”时，两个按钮都将显示“ asd”。

我是否理解错误的克隆思想，对于jquery和js来说还是很新的？

var dialogHeader, dialogContent, clone, dialog;

var strony = new Array;

$(".dropButton").droppable({
    accept: '.dragButton:not(".ui-sortable-helper")',
    drop : function(ev, ui) {
        clone = $(ui.draggable).clone().addClass("dropped");
        if(clone.hasClass("myBlueButtonDesign")){
            dialog.dialog('open');
        }//..rest is unnecessary I believe
};

dialog = $("#dialog").dialog({
     autoOpen: false,
     modal: true,
     width: 300,
     height: 400,
     buttons: [{
             text: 'Submit',
             click: function() {
                 submitInnerHtml(clone);
             }
         },
         {
             text: 'Cancel',
             click: function() {
                 dialog.dialog('close');
             }
     }]
 });

function submitInnerHtml(button) {
    strony[strony.length] = "<h1>" + dialogHeader.val() + "</h1><br/><p>" + dialogContent.val() + "</p>";
    button.click(function(){
        changeInner(strony.length - 1, "#workspaceNewsFeed", button);
    });
    dialog.dialog('close');
}

function changeInner(id, target, source) {
    $(target).html(strony[id]);
    var sourceName = $(source).find("p").text();
    $(".tekst").append(sourceName);
}

我相信，这就是您需要帮助我的全部。如果您还需要其他东西，请在评论中提出要求。

我从中拖动菜单的HTML：

<div id="menu">
        <h3>Green</h3>
            <div>
                <div id="myGreenButton1" class="dragButton myGreenButtonDesign"><p>Button 1</p></div>
                <div id="myGreenButton2"  class="dragButton myGreenButtonDesign"><p>Button 2</p></div>
                <div id="myGreenButton3"  class="dragButton myGreenButtonDesign"><p>Button 3</p></div>
            </div>
        <h3>Red</h3>
            <div>
                <div id="myRedButton1"  class="dragButton myRedButtonDesign"><p>Button 1</p></div>
                <div id="myRedButton2"  class="dragButton myRedButtonDesign"><p>Button 2</p></div>
                <div id="myRedButton3"  class="dragButton myRedButtonDesign"><p>Button 3</p></div>
            </div>
        <h3>Blue</h3>
            <div>
                <div id="myBlueButton1"  class="dragButton myBlueButtonDesign"><p>Button 1</p></div>
                <div id="myBlueButton2"  class="dragButton myBlueButtonDesign"><p>Button 2</p></div>
                <div id="myBlueButton3"  class="dragButton myBlueButtonDesign"><p>Button 3</p></div>
            </div>
    </div>

最佳答案

您为什么会显示最后插入的值的问题的答案是因为您始终在函数调用中使用strony.length-1

changeInner(strony.length-1, "#workspaceNewsFeed", button);

因此strony.length-1将指向strony的最后一个索引。

使其动态传递当前单击的按钮索引，否则它将始终打印最后一个。

获取按钮单击的索引，因此它将始终指向被单击按钮的存储值。

关于javascript - 按钮克隆上不需要的单击事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27521807/