Home > Article > Web Front-end > jQuery implements obtaining dynamically added label objects

jQuery implements obtaining dynamically added label objects

不言Original: 2018-06-28 15:47:283661browse

This article mainly introduces jQuery's implementation of obtaining dynamically added tag objects, involving jQuery's dynamic addition of page elements, element acquisition and event response related operating techniques. Friends in need can refer to the examples of this article

Describes jQuery's implementation of obtaining dynamically added tag objects. Share it with everyone for your reference, the details are as follows:

jquery cannot directly add click events to the web page dynamically, and obtain the object

Generally speaking, js obtains dynamically added components automatically. Define adding the onclick attribute to the tag to achieve the call. This is a common method, as follows:

onclick method to obtain

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button onclick=&#39;btnclick(this)&#39;>按钮"+i+"</button></br>";
  }
  $(&#39;#test&#39;).html(html);
  function btnclick(e) {
    console.log(e.textContent);//获取按钮文本
  }
</script>
</html>

Now jquery has In version 3, the official has abandoned the live method and recommends using the on method. The syntax is

$('selector').on('click','selection type',function (e){code snippet}

jquery cannot be dynamic To get the tags in the web page, you need to get the fixed tags of the web page first, and then get the other tags inside. Therefore, the p with the id of test in the above code is fixed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button>按钮"+i+"</button></br>";
  }
  $(&#39;#test&#39;).html(html);
  $(&#39;#test&#39;).on(&#39;click&#39;,&#39;button&#39;,function (e){
    console.log($(this));
  });
</script>
</html>

Writing like this is very simple. The button in the selected type can be further restricted, such as: button[class=test], which means selecting the dynamically created class as text button.

To achieve odd and even numbers, just add ":even", button[class=test]:even, or odd even# after test.

##The modified sample code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button class=test>按钮"+i+"</button></br>";
  }
  $(&#39;#test&#39;).html(html);
  $(&#39;#test&#39;).on(&#39;click&#39;,&#39;button[class=test]:even&#39;,function (e){
    console.log($(this));
  });
</script>
</html>

Test the running effect of jquery dynamically obtaining odd objects:

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

jquery Implement web page search function

JQuery-implemented image and text automatic carousel effect plug-in

The above is the detailed content of jQuery implements obtaining dynamically added label objects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to home screen optimization of Vue SPA single-page applicationNext article：Introduction to home screen optimization of Vue SPA single-page application

See more

jQuery implements obtaining dynamically added label objects

Related articles