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

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

jquery

jQuery重新加载但不是完全重新加载,jquery,Jquery,我有一个简单的html文件，如下所示，我在其中加载包含初始提交按钮的dom。它的onclick位于head中的jQuery（）函数下。它起作用了。但是，单击会创建另一个按钮，其单击事件也位于jQuery（）函数下问题是，当您在加载页面后创建一个标记元素，并打算在其中添加一个事件时，jQuery（）函数下的任何事件都不会附加到新创建的标记元素我已经有这个问题很多年了，从来没有找到一个令人满意的解决方案或解决办法，包括location.reload等。所以，我正在寻找一个明确的答案。嗯，我发现的

我有一个简单的html文件，如下所示，我在其中加载包含初始提交按钮的dom。它的onclick位于head中的jQuery（）函数下。它起作用了。但是，单击会创建另一个按钮，其单击事件也位于jQuery（）函数下

问题是，当您在加载页面后创建一个标记元素，并打算在其中添加一个事件时，jQuery（）函数下的任何事件都不会附加到新创建的标记元素

我已经有这个问题很多年了，从来没有找到一个令人满意的解决方案或解决办法，包括location.reload等。所以，我正在寻找一个明确的答案。嗯，我发现的唯一解决方法是在新创建的标记元素的属性下放置onclick=“some_function（）；”，并在级别而不是jQuery（）级别上放置该函数。我考虑了这个意大利面代码，并希望在jQuyIE（）函数下点击事件函数。以下是我在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