Question

我在下面有一个简单的 html 文件，我在其中加载了包含初始提交按钮的 dom。它的 onclick 位于头部的 jQuery() 函数下。有用。但是，该点击会创建另一个按钮，其点击事件也在 jQuery() 函数下。

问题是，当您在页面加载后创建标签元素并打算使用事件时，jQuery() 函数下的任何事件都不会附加到该新创建的标签元素。

我遇到这个问题很多年了，一直找不到满意的解决方案或解决方法，包括 location.reload 等。所以，我正在寻找明确的答案。好吧，我发现的唯一解决方法是放置一个 onclick="some_function();"在新创建的标签元素的属性下，并在级别而不是在 jQuery() 级别下具有该功能。我考虑了这个意大利面代码，并希望在 jQuery() 函数下有点击事件函数。

这是我在 index.html 中的代码：

<html>
<head>
<style>
</style>

<script src="jquery.js"></script>
<script>
jQuery(function() {
    jQuery('input#reload_page').click(function(event) {
        event.preventDefault();
        var btn = jQuery(event.target); //equivalent to: var btn = jQuery(this);
        console.log('reload page clicked');
        jQuery('span#current_time').html("Page last loaded: " + getTime());
        jQuery('p#timing').append('<input type="submit" id="test1" value="Created by Reload" />');
        jQuery();
    });
    jQuery('input#test1').click(function(event) {
        event.preventDefault();
        var btn = jQuery(this); //equivalent to: var btn = jQuery(event.target);
        console.log('"Created by Reload" clicked');
    });
});
    
function padLeft(str, length, char="0") {
    return (char.repeat(length)+(str.toString())).slice(-length)
}

function getTime() {
    var now = new Date(jQuery.now());
    var datetime_str = now.getUTCFullYear()+"-"+padLeft((now.getUTCMonth()+1), 2)+"-"+padLeft(now.getUTCDate()) + " @ " + padLeft(now.getHours(), 2) + ":" + padLeft(now.getMinutes(), 2);
    console.log(datetime_str);
    return datetime_str;
}

jQuery(document).ready( function () {
    var sx = "jQuery.version: "+jQuery.fn.jquery; //+" | jQuery.ui.version: "+jQuery.ui.version;
    console.log("jQuery.document.ready from instrument T_check2 head script begin..."+sx);
    var now = new Date(jQuery.now());
    var datetime_str = getTime();
    console.log("client-side time is: " + datetime_str);
    jQuery('span#pageloaded_time').html("Page first loaded: " + datetime_str);
    console.log("jQuery.document.ready from instrument T_check2 head script end");
});
</script>
</head>

<body>
<div class="row">
  <div class="col-md-12">
    <p id="timing">
    <span id="pageloaded_time"></span><br/>
    <span id="current_time"></span>&emsp;<input type="submit" id="reload_page" value="Reload Page"/>
    </p>
  </div>
</div>
</body>
</html>

这是我的输出：

> on load...
jQuery.document.ready from instrument T_check2 head script begin...jQuery.version: 3.2.1
2021-04-18 @ 08:26
client-side time is: 2021-04-18 @ 08:26
jQuery.document.ready from instrument T_check2 head script end

> on clicking on "Reload Page"...
reload page clicked
2021-04-18 @ 08:26

jQuery 重新加载但不是完全重新加载

0 个答案: