Question

在html表上使用jQuery事件委托时遇到问题。

我的html表在每行上都包含一个 click 按钮，该按钮使用jQuery打开另一个html窗口。该事件可以打开窗口，但是关闭事件不能打开。

ps：我想使用jQuery事件委托，因为我已经绑定了上面的侦听器，然后在表中添加了新行。

$(".list").on("click", "[data-window-open]", function(e) {
  e.preventDefault();
  e.stopPropagation();

  var targeted_popup_class = $(this).attr('data-window-open');
  $('div[data-window="' + targeted_popup_class + '"]:first').toggle();

});

$(".list").on("click", "[data-window-close]", function(e) {
  e.preventDefault();

  if ($(".window").is(":visible")) {
    $(".window").hide();
  }

});

.window {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="list">
  <tr>
    <th>name</th>
    <th>more</th>
  </tr>

  <!-- Popup Window 1 -->
  <div class="window" data-window="1">
    Ryan Sanchez
    <a href="#" data-window-close="1">close</a>
  </div>
  <tr>
    <td>Ryan</td>
    <td><a href="#" data-window-open="1">click</a></td>
  </tr>
  <!-- Popup Window 2 -->
  <div class="window" data-window="2">
    Pascal Reventon
    <a href="#" data-window-close="2">close</a>
  </div>
  <tr>
    <td>Pascal</td>
    <td><a href="#" data-window-open="2">click</a></td>
  </tr>

</table>

Answer 1

更改处理程序的选择器：

$("[data-window-open]").on("click", function(e)

和

$("[data-window-close]").on("click", function(e)

Answer 2

我将close事件作为一个函数使用，该函数可使用默认值并添加行。

$(".list").on("click","[data-window-open]", function(e)  
{
    e.preventDefault();
    e.stopPropagation(); 

    var targeted_popup_class = $(this).attr('data-window-open');
    $('div[data-window="' + targeted_popup_class + '"]:first').toggle(); 

    closeWindow();
}); 

function closeWindow()
{
    $("[data-window-close]").on("click", function(e)  
    {
    e.preventDefault();

    if($(".window").is(":visible"))
    {
        $(".window").hide();
    }  

    }); 
}

jQuery事件委托html表问题

2 个答案: