Question

我有一个应用程序，其中div元素被动态添加到页面。该页面也分为jQuery UI选项卡。

我使用on（）编写了一个函数，它将一个“selected”类应用于单击的div，允许用户在所选div上执行其他函数。

我的代码适用于第一个选项卡，但在其他选项卡上，单击div时未应用“selected”类。我需要做什么才能使这适用于所有选项卡？

这是我的代码：

//Select an individual content element by clicking on it
$(function() {
    $(".tabcontent").on("click", "div", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});

以下是标签的HTML：

<div id="tabs">
  <ul>
    <li class="tab"><a href="#tab-1">Section 1</a></li>
    <li class="tab"><a href="#tab-2">Section 2</a></li>
    <li class="tab"><a href="#tab-3">Section 3</a></li>
 </ul>

 <div id="tab-1" class="tabcontent">
 Section Title:<input class="sectionTitle"></input></br>
 <div contenteditable="true">blah blah</div>
 </div>
  <div id="tab-2" class="tabcontent">
 Section Title:<input class="sectionTitle"></input>
 <div contenteditable="true">blah blah</div>
 </div>
  <div id="tab-3" class="tabcontent">
  Section Title:<input class="sectionTitle"></input>
  <div contenteditable="true">blah blah</div>
  </div>
</div>

Answer 1

此代码适用于所有tabcontent类，包括在页面加载后动态创建的那些

$(function() {
    $(document).on("click", ".tabcontent", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});

Answer 2

您可以使用以下代码尝试：

$(document).ready(function() {
    $(".tabcontent").on("click", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});

Answer 3

请你查看这个演示：

Demo

Jquery代码

$(document).ready(function(){
  $('ul.tabs').each(function(){
  // For each set of tabs, we want to keep track of
  // which tab is active and it's associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  $active.addClass('active');
  $content = $($active.attr('href'));

  // Hide the remaining content
  $links.not($active).each(function () {
    $($(this).attr('href')).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $active.removeClass('active');
    $content.hide();

    // Update the variables with the new link and content
    $active = $(this);
    $content = $($(this).attr('href'));

    // Make the tab active.
    $active.addClass('active');
    $content.show();

    // Prevent the anchor's default click action
    e.preventDefault();
  });
});

});

HTML代码

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
  </ul>
  <div id='tab1'>
    <p>Hi, this is the first tab.</p>
  </div>
  <div id='tab2'>
    <p>This is the 2nd tab.</p>
  </div>
  <div id='tab3'>
    <p>And this is the 3rd tab.</p>
  </div>

CSS代码：

* {padding:0; margin:0;}

            html {
                background:url(/img/tiles/wood.png) 0 0 repeat;
                padding:15px 15px 0;
                font-family:sans-serif;
                font-size:14px;
            }

            p, h3 { 
                margin-bottom:15px;
            }

            div {
                padding:10px;
                width:600px;
                background:#fff;
            }
.tabs li {
                list-style:none;
                display:inline;
            }

            .tabs a {
                padding:5px 10px;
                display:inline-block;
                background:#666;
                color:#fff;
                text-decoration:none;
            }

            .tabs a.active {
                background:#fff;
                color:#000;
            }

Answer 4

这应该有效：

$(function () {
    $('#tabs').tabs();
    $("#tabs").on("click", ".tabcontent", function (event) {
        //remove "selected" class from any element that has it
        $('.selected').removeClass("selected");
        //add "selected" class to the div that was clicked
        $(this).addClass("selected");
    });
});

使用特定的CSS显示它的工作情况，以使其可见：http://jsfiddle.net/du6M2/

注意：如果可能的话，阻止将事件管理器添加到文档或窗口，从性能的角度来看，需要挂钩到更接近的元素（父包装器），尤其是在较大或复杂的页面上。

jQuery on（）仅适用于第一个选项卡

4 个答案: