在jQuery和jqueryUI模式框中动态更改id

Question

我有一个常用按钮Add Entry和一个包含15个<li>项的列表，比如1,2,3 upto 15。因此，当我点击1时，该按钮被分配了一个id button_1，类似于2,3，最多15个。

现在我有不同的模式框用于不同的列表项。单击该公共按钮Add Entry后，将打开一个模式框，对应于我选择的列表项。

我在javascript中设置了一个全局变量add_entry_button_id = 1。选择任何<li>项后，我会更新此变量。

单击按钮后，我会这样做。

HTML

<button id="1_button" class="btn btn-primary pull-right add_entry_button" style="margin-bottom:10px" onclick="add_new_entry_button(add_entry_button_id)">Add New Entry</button>

这是我打开特定模式框的代码

JavaScript的：

function add_new_entry_button(button_id){
    console.log(button_id)  // shows the current button_id
    $( "#"+button_id+"_button" ).click(function() {
        $( "#"+button_id+"_form" ).dialog( "open" );
        console.log(button_id)  // shows all the button_ids that i've traversed
    });
}

我现在面临的问题是虽然我的模态框打开了，但是当我点击多个<li>项目，然后点击添加按钮时，所有这些模态框的一系列也会显示我已经以前经过过。

例如： - 如果我点击1然后添加按钮，将打开一个模式框。 接下来我单击3并添加按钮，3的模态框将打开，然后1的模态框也将打开。

同样，如果我点击7并添加按钮，7的模态框将打开，然后3的模态框，然后1的模态框也将打开。

Answer 1

尝试使用.unbind()从先前按下的添加按钮中删除点击事件。

但另一方面，我可能不会这样使用ID。似乎等待发生这很麻烦。 .data()可能更适合您的情况。

Answer 2

修改

尝试这样的事情

function add_new_entry_button(button_id){
    console.log(button_id)  // shows the current button_id
    //unbind all others button
    $(".btn").unbind( "click" );

    $( "#"+button_id+"_button" ).click(function() {
        $( "#"+button_id+"_form" ).dialog( "open" );
        console.log(button_id)  // shows all the button_ids that i've traversed
    });
}

注意：我会使用 #button _ 1 代替#1_button