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

Changing id dynamically in jQuery and jqueryUI modal box

本文关键字：动态 id jQuery jqueryUI 模式      更新时间：2023-09-26

我有一个通用的按钮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>项后，我更新此变量。

单击

单击按钮后，我执行此操作。

目录：

<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 的模态框也将打开。

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

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

编辑

尝试这样的事情

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

相关文章：