在点击事件Jquery中,$(这个)怎么样?

问题描述 投票:-2回答:4

我有jquery的click事件,我想知道如何点击选择器...

$('#parent').on('click','#child',function(){
 //....
});  


<div id="parent">
 <div id="child">
 </div>
</div>    

$(这)是#parent还是#child

javascript jquery events this
4个回答
3
投票

上下文this与事件目标相关。在你的情况下是#child

此外,当id可用时,您不需要事件委派,因此将该事件绑定如下:

$('#child').on('click',function(){
 //....
}); 

4
投票

这是孩子,为什么你不只是尝试

$('#parent').on('click','#child',function(){
    console.log($(this));
});  

$('#parent').on('click','#child',function(){
    console.log($(this));
});
#child {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
    <div id="child"></div>
</div>

3
投票

这称为Event delegation,它允许我们将单个事件侦听器附加到父元素,该元素将为匹配选择器的所有后代触发,无论这些后代现在是存在还是将来添加。

所以,这里的$(this)总是将被点击的子元素引用到父元素,这里是#child

一个简单的动态添加元素演示:

// Attach Event
// on(events, selector, handler);
$('#container').on('click', 'a', function(event) {
  event.preventDefault();
  console.log('Anchor clicked!');
  alert('Anchor clicked!');
});

// Create elements dynamically
$('#container').append('<a href="#output">Click me!</a>');
body{font:12px Tahoma,Arial,Helvetica,sans-serif;color:#333;margin:20px}
h1{font-size:1.4em;margin-bottom:20px}
h2{font-size:1.2em}
#container{border:1px dashed #aaa;font-size:1em;padding:10px}
a{color:green}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Dynamically added link:</h2>
<div id="container"></div>

1
投票

你可以写这样的东西来检查。

$(document).ready(function() {
  $('#parent').on('click','#child',function(){
    console.log("This:", $(this));
  });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
 Parent
 <div id="child">
   CHILD (click on it)
 </div>
</div>