如何從同一個html頁面上的多個按鈕打開一個對話框

class =「front」的Div在html頁面上多次克隆，按鈕嵌套（class = poperbtn）clone，按鈕使用是打開對話框/彈出（class =「poper」），例如：如果我有4個div - > class = front這意味着4個按鈕 - > class =「poperbtn」，每次點擊其中一個按鈕對話框必須彈出，如何做到這一點？可能嗎？這裏是一個代碼示例。如何從同一個html頁面上的多個按鈕打開一個對話框

//對話框 - 箱開啓按鈕

<div class="front"> 
     <input type="button" class="poperbtn" value="push it!" /> </div>

//事業部的對話框

<div id="poper"> <h1>here I am </h1></div>

//爲了避免使用ID我選擇按鈕（ID = poperbtn）這樣 - 工作正常我有id =「poperbtn」按鈕。

var _btnToDialog = ""; 
     $(".front").live("click", function() {      
      _btnToDialog = $(this).next().children().eq(0);   
     });

//對話框jQuery函數 - 我不知道這個代碼..來到這裏卡住..

$(function() { 
      $("#poper").dialog({ 
       autoOpen: false, 
       width: 650, 
       height: 600, 
      }); 
      $(_btnToDialog).click(function() { 
       $("#poper").dialog("open"); 
      }); 
     }); 
    });

**根據意見，我改變了按鈕 - 沒有ID只類。

來源

2014-09-11 Damkulul

Id在html頁面中應該是唯一的。類可以重複。將您的按鈕ID切換到課程。 – topless 2014-09-11 10:50:09

甚至更好地使用'data-'屬性作爲js鉤子 - 爲類的目的留下'class'：css presentation – Luca 2014-09-11 10:51:24

@topless - ok如果我將刪除Id並使用類，我的下一步是什麼？ – Damkulul 2014-09-11 10:54:24

您可以在.front元素內掛起所有input的點擊處理程序。

由於動態創建的元素應該是，例如

$(document).on("click", "selector", function() {})

，而不是

$("selector").click(function() {})

所以最終代碼如下：

$(document).on("click", ".front input", function() { 
     $("#poper").dialog("open"); 
    });

您可以爲所需的input添加班級（例如，.button）。然後，代碼可以簡化爲：
```
$(document).on("click", ".button", function() { 
    $("#poper").dialog("open"); 
}); 
```

更新。隨着input小號.poperbtn類將是

$(document).on("click", ".poperbtn", function() { 
    $("#poper").dialog("open"); 
});

來源

2014-09-11 10:56:47 Regent

它看起來不錯，但是在div [class = front]裏面的完整代碼 - >還有更多的輸入。所以根據這個信息接下來要做什麼？ – Damkulul 2014-09-11 10:59:31

@Damkulul我已經更新了答案。 – Regent 2014-09-11 11:00:20

好吧，我試過了，它工作得很好（更新）謝謝:-)。 – Damkulul 2014-09-11 11:53:37

您也可以看看這個JSBin解決方案。你可以通過很多方法來解決這個問題，它取決於你想要提供什麼樣的行爲，以及你在代碼庫中已經存在的東西的方式。

來源

2014-09-11 11:07:39 topless

如何從同一個html頁面上的多個按鈕打開一個對話框

回答

相關問題