Jquery.将插件的实例化绑定到动态加载的内容上

Jquery. Binding the instantiation of a plugin on dynamically loaded content

本文关键字:加载 动态 绑定 插件 实例化 Jquery      更新时间:2023-09-26

在页面上动态放置的div标签中选择id时出现问题

这是一个日期字段,我希望在用户关注该字段时显示一个日期拾取器。我试图设置一个插件,而不是做任何其他类型的jQuery事件,我认为,我的问题。

这是动态加载的内容,当用户点击"日历"中的一个单选按钮时,它就会被放置在页面上。

$("#s10").click(function(){
    $("#S_Date").html('<input type="text" name="Start_Date" id="Start_Date" value="2016-05-24" />2016-05-24');

#S_Date是在文档加载时加载的父div id。

我正在使用"PickMeUp"日期拾取器插件。

据我所知,我需要使用on()事件处理程序,但我似乎无法让它绑定到#Start_Date

这是我最近的一次尝试:

var pickitup = $("#Start_Date").pickmeup({format  : 'Y-m-d'});
$("#S_Date").on('focus', "#Start_Date", function(){pickitup});

定义了拾取,我也尝试过:

$("#S_Date").on('focus', "#Start_Date", pickitup);

$("#S_Date").on('focus', "#Start_Date", function(){pickmeup({format : 'Y-m-d'})});失败,pickmeup is not defined错误。

的想法吗?

所以,如果我理解你在做什么,你想插入一些html到一个给定的元素点击事件,然后应用日期选择器功能吗?

$("#s10").on("click", function() { //when the element is clicked...
  //create an input with the appropriate attributes
  var picker = $("<input />", { type: "text", name: "Start_Date", value: "2016-05-24" }); 
  //append it to the desired element(s)
  $("#S_Date").append(picker);
  //run the plugin on it
  picker.pickmeup({format: 'Y-m-d'});
});

这是一个工作(简单)小提琴https://jsfiddle.net/s6vu0rnq/

你得到的未定义错误是因为"pickmeup"是jquery的原型属性,但你试图从全局作用域调用它。

也"。点击"is just a alias for"。,所以你可以使用。