8

我的问题专门指http://api.jquery.com/event.target/#example-1

如果您在 the 或其他标记中使用 span<li>来更改样式，例如<b>我在此处所做的，则元素的该部分不会触发 JQuery 函数来切换它的子元素。怎样才能使这项工作？

HTML：

<ul>
    <li><b>This doesn't work,</b> this does
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>

JavaScript：

function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
    $target.children("ul").toggle();
  }
}
$("ul").click(handler).find("ul").hide();
4

2 回答 2

15

为了继续使用您当前的表格，我建议使用closest()：

function handler(event) {
    $(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();

JS 小提琴演示。

虽然为了我自己的使用，我更喜欢：

$('li').on('click', function(e){
    e.stopPropagation();
    $(this).find('ul').toggle();
});

JS 小提琴演示。

参考：

于 2013-07-19T23:07:07.263 回答
0

e.target children 的完整示例，与数据表和外部数据最接近。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
  <script src="js/script.js"></script>
</head>
<body>

<div class="col-md-12 sectionone">
 <div id="coxtable">

 <div class="col-md-3 outerblock" id="section1"><div  class="blocks section1"><h6 class="span1">Section1</h6><span class="span1a">Section1a</span></div></div>
 <div class="col-md-3 outerblock" id="section2"><div  class="blocks section2"><h6 class="span1">Section2</h6><span class="span1a">Section2a</span></div></div>
 <div class="col-md-3 outerblock" id="section3"><div  class="blocks section3"><h6 class="span1">Section3</h6><span class="span1a">Section3a</span></div></div>
 <div class="col-md-3 outerblock" id="section4"><div  class="blocks section4"><h6 class="span1">Section4</h6><span class="span1a">Section4a</span></div></div>

 </div>
</div>
<div class="sectiontwo col-md-12">
 <table id="example">
        <thead>
            <tr>            
                <th>name</th>
                <th>stargazerscount</th>
                <th>forkscount</th>
                <th>description</th>

            </tr>
        </thead>
        <tbody>         
        </tbody>
    </table>

    </div>
    <div id="testmodal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="modalbtn btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Javascript

$(document).ready( function () {
var tables=$('#example').DataTable( {
 "ajax": {
             "type"   : "POST",          
            "url": "http://localhost/example/json/members.json",
             "dataSrc": function (json) {
      var return_data = new Array();
      for(var i=0;i< json.length; i++){    
        return_data.push({     
         'name': json[i].name,
          'stargazerscount'  : json[i].stargazerscount,
           'forkscount'  : json[i].forkscount,
          'description' : json[i].description
        })
        $('.overlay').hide();
        $(".loader").hide();
      }
      return return_data;
             }
    },

        "columns": [
            { "data": "name" },
            { "data": "stargazerscount" },
            { "data": "forkscount" },
            { "data": "description" }

        ]

}); 
/*onclick filter*/

    $(".outerblock").click(function(e){

      $("#testmodal").modal('show');

      var item=$(e.target).closest('span').text();

        $( ".modalbtn" ).one( "click", function(event) {
             $(this).off(event);
   alert(item)
    var tables=$('#example').DataTable( {
        "destroy":true,
 "ajax": {
             "type"   : "POST",          
            "url": "http://localhost/example/json/members.json?id="+item,
             "dataSrc": function (json) {
      var return_data = new Array();
      for(var i=0;i< json.length; i++){    
        return_data.push({     
         'name': json[i].name,
          'stargazerscount'  : json[i].stargazerscount,
           'forkscount'  : json[i].forkscount,
          'description' : json[i].description
        })
        $('.overlay').hide();
        $(".loader").hide();
      }
      return return_data;
             }
    },

        "columns": [
            { "data": "name" },
            { "data": "stargazerscount" },
            { "data": "forkscount" },
            { "data": "description" }

        ]

}); 
});


  });   

 $("#example").delegate("tbody tr td:first-child", "click", function(e){
    var item=$(e.target).text();
    //alert(item);
      $("#testmodal").modal('show');
      $( ".modalbtn" ).one( "click", function(event) {
             $(this).off(event);
    alert(item);


    var tables=$('#example').DataTable( {
        "destroy":true,
 "ajax": {
             "type"   : "POST",          
            "url": "http://localhost/example/json/members.json?id="+item,
             "dataSrc": function (json) {
      var return_data = new Array();
      for(var i=0;i< json.length; i++){    
        return_data.push({     
         'name': json[i].name,
          'stargazerscount'  : json[i].stargazerscount,
           'forkscount'  : json[i].forkscount,
          'description' : json[i].description
        })
        $('.overlay').hide();
        $(".loader").hide();
      }
      return return_data;
             }
    },

        "columns": [
            { "data": "name" },
            { "data": "stargazerscount" },
            { "data": "forkscount" },
            { "data": "description" }

        ]

}); 
}); 
}); 
});

json

[{
            "name": "mango",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "fruits"
        },
{
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        }
]
于 2018-05-20T15:25:40.493 回答