按钮克隆上的不需要的点击事件

Question

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

打开左边的蓝色标签，然后把按钮放到绿色的div上，出现对话框，把东西放在那里然后点击按钮。 以相同的方式拖动下一个蓝色按钮，但在对话框中更改值。点击。

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

[/编辑]

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

我想要完成的是让每个按钮显示不同的文本，但是当我将第一个按钮设置为显示“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);
}

我相信这就是你需要帮助我的全部。如果您需要更多内容，请在 cmets 中请求。

我从中拖动的菜单的 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>

Answer 1

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

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

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

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

获取按钮单击时的索引，以便它始终指向单击的按钮存储值。