Question

我遇到了这个问题（这里我总结），其中Jquery .on方法将监听器添加到加载页面时创建的第一个按钮，但是当通过单击前一个按钮创建另一个按钮时，新按钮会不包含任何监听器，虽然我指出它应该在body内部查找具有变量count值的id的元素。根据.on方法，您可以将侦听器添加到稍后在页面上创建的对象。

这是HTML：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <body>



        <script src="script.js"></script>
    </body>
</head>

这里是script.js

var count = 1;

$("body").html("<button id=\"" + count +"\">1</button>");

$("body #" + count).on("click", function(){
    count++;
    $("body").html($("body").html() + "<button id=\"" + count +"\">" + count +"</button>");
});

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document.body).on('click', 'body #' + count, function() {
  //do something
});

使用.on()，您可以定义一次函数，它将针对任何动态添加的元素执行。

例如

    <?php
    session_start();
    if(isset($_POST['logout'])) {
    unset($_SESSION['Username']);
    session_destroy();
    }
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Backend</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div class="" style="min-width: 1024px; max-width: 1920px; margin: 0 auto; min-height: 1280px; max-height: 1080px;">

    <?php
    if (isset ($_SESSION['Username']))
    {
    ?>

    <button onclick="location.href = 'logout.php';">Logout</button>



    <?php
    if (isset ($_SESSION['Username']))
    {
    echo "";

    $servername = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "request";


    $conn = new mysqli($servername, $username, $password, $dbname);

    if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    }




    $sql = "SELECT * FROM request";
    $result = $conn->query($sql);


   $sql = "SELECT * FROM request ORDER BY id DESC";
   $result = $conn->query($sql);

   if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {

    if (isset ($_SESSION['Username']))
    {
    ?>


        <div align="center">
       <div class="requests">
       <p><?php echo $row["Name"]; ?></p>

        <p><?php echo $row["Number"]; ?></p>
        <p><?php echo $row["Song"]; ?></p>
        </div>

    </div>





    <?php
        }else{
            header("Location: index.php");
        }
        }
    } else {
        echo "0 requests";
    }
    }
    mysqli_close($conn);
    ?>

Answer 2

.on()仅适用于稍后添加到页面的元素，只有当它绑定到运行时已存在的元素时才会使用。在您的示例中，您绑定到.on()的元素在运行时不存在，因此jQuery无法将处理程序绑定到动态添加的元素。请注意，$el.on('click')与$el.click()基本相同。

你想要做的不同的是，将.on('click')绑定到一个元素，比如<body>元素，它始终存在于运行时 - 这意味着你应该改变这个：

$("body #" + count).on("click", function () {...});

......对此：

$("body").on("click", "#" + count, function () {...});

.on()接受一个额外的参数，允许正文在收到点击事件时检查哪个元素“冒泡”。在这种情况下，你告诉身体：

收听点击事件
当检测到单击事件时，仅当我知道它来自ID为count

Answer 3

在创建按钮元素后未调用的脚本中单击事件。试试下面的剧本。

＆＃13;

var count = 1;

$("body").html("<button id=\"" + count + "\">1</button>");

$("body #" + count).on("click", btnListener);

function btnListener() {
  count++;
  $("body").html($("body").html() + "<button id=\"" + count + "\">" + count + "</button>");
  $("body #" + count).on("click", btnListener);
}

＆＃13;

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <body>



    <script src="script.js"></script>
  </body>
</head>

＆＃13;

Jquery .on Listener不会将click监听器添加到新元素

3 个答案: