Question

如何在动态选择器中使用<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageButton android:layout_width="48dp" android:layout_height="48dp" android:background="?selectableItemBackgroundBorderless" android:src="@drawable/ic_back" /> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>时访问动态目标？

因为jQuery.fn.on在binder函数中提供了父元素。我需要让每个元素本身动态地获取相应的$(this)。

小提琴： https://jsfiddle.net/u1kuufj7/1/

HTML：

data-attributes

使用Javascript：

<div id="container">
  <div id="1" class="ch">Click</div><br>
  <div id="2" class="ch">Click</div><br>
  <div id="3" class="ch">Click</div><br>
  <div id="4" class="ch">Click</div><br>
  <div id="5" class="ch">Click</div><br>
</div>

Answer 1

要使用事件委托，on的第二个参数应该是选择器（字符串），而不是jQuery对象：

var $container = $('#container');
var $chs = '.ch';                   // <== Changed

$container.on('click', $chs, function() {
    alert($(this).attr('id'));
});

现在，this将引用已点击的.ch。

直播示例：

＆＃13;

var $container = $('#container');
var $chs = '.ch';

$container.on('click', $chs, function() {
    alert($(this).attr('id'));
});

＆＃13;

<div id="container">
  <div id="1" class="ch">Click</div><br>
  <div id="2" class="ch">Click</div><br>
  <div id="3" class="ch">Click</div><br>
  <div id="4" class="ch">Click</div><br>
  <div id="5" class="ch">Click</div><br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

附注：$(this).attr("id")只是写this.id的很长的路。

附注2：虽然以数字开头的id值完全有效，但它们在CSS中难以使用，因为ID选择器不能以字面数字开头。（有很多方法，通过转义或通过属性选择器，但它很尴尬。）因此，我通常会避免id以数字开头。

Answer 2

使用，您将jQuery对象传递给.on()

＆＃13;

var $container = $('#container');
$container.on('click', '.ch', function() {
    alert($(this).attr('id'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="container">
  <div id="1" class="ch">Click</div><br>
  <div id="2" class="ch">Click</div><br>
  <div id="3" class="ch">Click</div><br>
  <div id="4" class="ch">Click</div><br>
  <div id="5" class="ch">Click</div><br>
</div>

＆＃13;

jQuery，Dynamic on |访问动态目标

2 个答案: