在jQuery中创建元素后，如何调用函数？

StackOverflow https://stackoverflow.com/questions/6386128

  •  29-10-2019
  •  | 
  •  

题

我想在创建元素后调用函数。有没有办法做到这一点？

例子：

$("#myElement").ready(function() {
    // call the function after the element has been loaded here
    console.log("I have been loaded!");
});
有帮助吗？

解决方案

您如何创建元素？

如果您在静态HTML中创建它，请使用 .ready(handler) 或者 .on("load", handler). 。如果您使用的是Ajax，但这是另一只鱼。

如果您正在使用jQuery的 load() 函数然后，当内容加载时，您可以运行一个回调：

$('#element').load('sompage.html', function(){ /* callback */ });

如果您正在使用jQuery的 $.ajax 或者 $.get/$.post 函数然后有一个成功的回调：

$.ajax({
  url: 'somepage.html',
  success: function(){
    //callback
  }
});

如果您只是创建元素并像这样附加元素：

$('body').append('<div></div>');

然后，您可以做到这一点：

$('<div />', { id: 'mydiv' }).appendTo('body').ready(function(){ /* callback */ });

但这没关系 - 因为它是同步的（这意味着下一行代码直到将元素添加到DOM上才能运行... - 除非您正在加载图像等），以便您只能执行：

$('<div />', { id: 'mydiv' }).appendTo('body');
$('#mydiv').css({backgroundColor:'red'});

但是，很敬业，说您可以做到这一点：

$('<div />', {id:'mydiv'}).appendTo('body').css({backgroundColor:'red'});

其他提示

您可能想研究jQuery 居住 事件。您将事件处理程序附加到现在匹配或在DOM中创建其他元素之后的选择器上。

因此，如果您有 <ul> 然后您动态创建新的 <li> 物品，在您的 $(document).ready() 您可以将选择器连接到活动处理程序，以便所有您的所有 <li> 该活动将连接元素。

这是一个 JSFIDDLE 示例该演示 live.

希望这可以帮助。

您可以尝试此代码

$('body').on('click', '#btn', function() {
  $($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
  width: 100px;
  background: red;
  color: white;
  height: 20px;
  font: 12px;
  padding-left: 4px;
  line-height: 20px;
  margin: 3px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div>
      <!-- Button trigger modal -->
      <button type="button" id="btn">Create Div</button>
      <div id="old">

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

有时，这是在您自己的脚本之外创建/加载的DOM元素，无论是由其他JS库还是直接控制之外的事件。

对于这种情况，我始终设置一个间隔，该间隔会定期检查目标元素是否存在，如果是正确的，则该间隔会删除自身并运行回调函数。

为此，我有一个预定义的功能，我重复使用：

function runAfterElementExists(jquery_selector,callback){
    var checker = window.setInterval(function() {
     //if one or more elements have been yielded by jquery
     //using this selector
     if ($(jquery_selector).length) {

        //stop checking for the existence of this element
        clearInterval(checker);

        //call the passed in function via the parameter above
        callback();
        }}, 200); //I usually check 5 times per second
}

//this is an example place in your code where you would like to
//start checking whether the target element exists
//I have used a class below, but you can use any jQuery selector
runAfterElementExists(".targetElementClass", function() {
    //any code here will run after the element is found to exist
    //and the interval has been deleted
    });

在创建元素之后，请访问.live（）

$('.clickme').live('click', function() {
      // Live handler called.
});

然后添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){

   console.log("I have been created!");

});

您可以使用 setInterval 功能检查一个元素的存在：

var CONTROL_INTERVAL = setInterval(function(){
    // Check if element exist
    if($('#some-element').length > 0){
        // ...
        // Since element is created, no need to check anymore
        clearInterval(CONTROL_INTERVAL);
    }
}, 100); // check for every 100ms

最直接的是创建元素后直接调用回调:)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top