使用$(this）调用动态创建的元素

Calling dynamically created element with $(this)

本文关键字：动态 创建 元素 调用 this 使用      更新时间：2023-09-26

我正试图通过$（this）调用一个动态创建的元素，这可能吗？

例如：

$(".el").on("click",function(){
  $("body").append("<div class='new'></div>");
    // call class .new via $(this)
});

是否可以从$（".el"）调用class.new或者从另一个函数的$（".new"）调用$（".el"）

在不调用其他函数的情况下，重新分配this是不可能的。无论如何，最好缓存元素，将其保存在变量中。您可以使用以下代码：

$(".el").on("click",function(){
    var $el = $("<div class='new'></div>").appendTo('body');
    // $el will be $('.new') and you can call jQuery function like that
    // $el.addClass('work');
});

此时无法重新分配this，但您可以在创建新元素时将其分配给变量。这样，您可以简单地使用新变量而不是关键字this。

$(".el").on("click",function(){
  var newEl = $('<div class="new"></div>');
  $("body").append(newEl);
});

另一方面，您可以在另一个函数中将新元素用作this。要执行此操作，请使用call或apply函数。

someFunc.call(newEl); // Makes newEl become this inside the function
var someFunc = function(){
  // this is now newEl within this scope
}

$('.el').on('click',function(){
  var mynewdiv = $('<div class="new"></div>');
  $('body').append(mynewdiv);
  //mynewdiv is your dynamically created element.
});

或

$('.el').on('click',function(){
   var UniqueId = '_id'+ new Date().valueOf();
   $('body').append('<div class="new" data-id="'+UniqueId+'"></div>');
   // $('[data-id='+UniqueId+']') is your created element.
});
相关文章：