Question

我有4个div，我想获得点击的div并改变它的风格，我的div是动态创建的，这就是为什么我不想使用id

<div class="item">Lorem ipsum 1</div>
<div class="item">Lorem ipsum 2</div>
<div class="item">Lorem ipsum 3</div>
<div class="item">Lorem ipsum 4</div>

jquery代码：

<script type="text/javascript">

    $('.item').on("click", function() {
    // change style
});
</script>

Answer 1

您需要使用 event delegation 。

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

$('body').on("click",'.item', function() {
  // change style
});

Answer 2

$(document).on("click", ".item", function() {
  var elt = $(this);
  // do whatever you want with elt.css()
});

这样，无论何时创建元素（例如通过ajax添加到页面），您都将捕获任何.item元素上的每个单击事件

有关jQuery Event Deleguation doc

的更多信息

Answer 3

我们首先包含jquery库。然后我们在jquery click事件上使用css进行样式化。

    <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

    <script type="text/javascript">

     $(document).ready(function(){
     $(".item").click(function(){
     $(".item").css("color", "red");
     //we can style anything .css('property','value');
      });
    });

    </script>
 </head>
 <body>

JQuery选择单击的div

3 个答案: