Question

我的问题是这样的：

我在HTML中使用javascript生成这些列表：

<div class="row" id="reveal-listing-id">
    <div class="large-12 columns">
        <div class="panel">
            <div class="row">
                <div class="large-12 columns">
                    <div class="listing-header-container">
                        <div class="listing_header_section">15 Broad Steet <span class="blue-pips">|</span> Unit #number <span class="blue-pips">|</span> New York, NY</div>
                    </div>
                </div>
            </div>
            <div class="row listing" id="listing-id">
                        <p class="subtleFont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
                            nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
                            wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                            lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
                            dolor in hendrerit in vulputate

点击后的

和javascript将显示包含所有列表信息的div，这些信息现在具有id =“listing-id”。 java脚本如下所示：

  $( "#reveal-listing-id" ).on( "click", function( event, ui ){
    $( "#listing-id" ).toggle( "blind", 600);
  });

现在我知道每个HTML元素我可以轻松地放置一个唯一的ID并在我运行我的javascript来构建它们时显示ID但是我如何使onClick事件能够显示相应的DIV以获得正确的点击而不需要对每一个进行硬编码？

例如，我不想做类似的事情：

  $( "#reveal-listing-1" ).on( "click", function( event, ui ){
    $( "#listing-1" ).toggle( "blind", 600);
  });
  $( "#reveal-listing-2" ).on( "click", function( event, ui ){
    $( "#listing-2" ).toggle( "blind", 600);
  });
  $( "#reveal-listing-3" ).on( "click", function( event, ui ){
    $( "#listing-3" ).toggle( "blind", 600);
  });
  $( "#reveal-listing-4" ).on( "click", function( event, ui ){
    $( "#listing-4" ).toggle( "blind", 600);
  });

列表数量可以是5到500之间，因此我需要动态解决方案。

Answer 1

你可以：

使用选择器为您提供ID为“reveal-listing - ”
从点击元素的ID

这就是这样的：

 $('[id^="reveal-listing-"').on("click", function( event, ui ){
     $("#listing-"+this.id.slice(15)).toggle( "blind", 600);
 });

如果您更喜欢使用事件委派来最小化绑定数量，请使用

 $(document.body).on("click", '[id^="reveal-listing-"', function( event, ui ){

Answer 2

如果你有这些div“reveal-listing-id”是来自分页的AJAX响应，那么未来的div将不会绑定到该jQuery函数。这是因为jQuery在加载时绑定并且不会从ajax响应中重新绑定任何内容。

如果你想要一个适用于每个div甚至未来div的泛型绑定，你应该这样做：

<div id="list_container">
  <div class="row reveal-listing">
  </div>
  <div class="row reveal-listing">
  </div>
  <div class="row reveal-listing">
  </div>
</div>

JS：

$('#list_container').on('click', '.reveal-listing', function() {
  $(this).find('#listing-id').toggle("blind", 600);
});

请注意，我在你周围创建了一个div，所以你只绑定那个而不是整个文档。

Answer 3

在设置事件侦听器之后创建的任何控件都不会包含在将发布该事件的控件中。

因此，如果您想这样做，您可以在创建控件时显式绑定控件上的事件，也可以在代码中创建两个函数。

其中一个是连接事件功能，您将看起来像：

 function connectEvents(){
    $( "#reveal-listing-id" ).on( "click", function( event, ui ){
       $( "#listing-id" ).toggle( "blind", 600);
    });
 }

另一个断开事件的功能

function disconnectEvents(){
   $( "#reveal-listing-id" ).each(function(control){
      control.off('click');
   });
}

然后在文档就绪时调用connectEvents函数。

当您想要动态创建另一个控件时，您需要先调用disconnectEvents函数，以便断开所有控件的所有事件并运行connectEvens函数以重新连接所有控件的所有事件（新控件为好）

* 将从 $（“＃...”）查询中返回的所有控件

动态生成元素的jquery事件，不对每个元素进行硬编码

3 个答案: