Question

我有两个简单的jQuery函数，一个标准下拉函数和另一个在点击时附加HTML内容的函数。问题是下拉功能不适用于附加的HTML。

这是我的HTML：

<a href="#" id="new_line">New Line</a>

<ul class="lines">

   <li>
     <a href="#" class="dropdown-toggle">Popup</a> 
     <ul class="dropdown-menu" style="background: #000; padding: 10px; display:none;">ddd
     </ul>
  </li>

</ul>

jQuery函数：

$(function() {

   $('.dropdown-toggle').click(function(){

      $('.dropdown-menu').not($(this).next('.dropdown-menu')).hide();
      $(this).next('.dropdown-menu').toggle();
      });

});

$(document).ready(function() {
   var wrapper = $(".lines");
   var add_button = $("#new_line");

   $(add_button).click(function(){ 

        $(wrapper).append('<li><a href="#" class="dropdown-toggle">Popup</a> <ul class="dropdown-menu" style="background: #000; padding: 10px; display:none;">ddd</ul></li>'); 
   });

});

请在codepen上查看以下示例。你会看到一个＆＃34;下拉＆＃34;有用的链接。点击＆＃34; New Line＆＃34;将出现新的下拉链接，但这些链接不起作用。知道如何让它们工作吗？

谢谢！

http://codepen.io/anon/pen/yYgNLM

Answer 1

您需要delegate the events关于动态加载的元素。请使用此：

$(".lines").on("click", '.dropdown-toggle', function() {

Answer 2

它不起作用，因为您将事件处理程序附加到选择它们并附加处理程序时存在的控件。添加新链接时，不会重新评估选择器，因此不会附加任何处理程序。

您需要做的是使用delegated events：该技术包括在容器冒泡时处理容器，而不是处理控件本身。因此，当您向此容器添加新控件时，也会处理它们的事件。

您可以使用jQuery's .on()完成此操作。

Answer 3

使用

CREATE external TABLE msg_details(customer_id STRING, income BIGINT, AType String,Flatno String, Street string,city string,country string,pin string)
ROW FORMAT SERDE 'com.ibm.spss.hive.serde2.xml.XmlSerDe'
WITH SERDEPROPERTIES (
"column.xpath.customer_id"="/record/@customer_id",
"column.xpath.income"="/record/income/text()",
"column.xpath.address_type"="/record/address/@type",
"column.xpath.Flatno"="/record/address/Flatno/text()",
"column.xpath.Street"="/record/address/Street/text()",
"column.xpath.city"="/record/address/city/text()",
"column.xpath.country"="/record/address/country/text()"
"column.xpath.pin"="/record/address/pin/text()"
)
STORED AS
INPUTFORMAT 'com.ibm.spss.hive.serde2.xml.XmlInputFormat'
OUTPUTFORMAT 'org.apache.hadoop.hive.ql.io.IgnoreKeyTextOutputFormat'
location '/user/root/serdeinput'
TBLPROPERTIES (
"xmlinput.start"="<record customer",
"xmlinput.end"="</record>"
);

点击working exemple

jQuery - 简单的下拉函数不适用于附加的HTML

3 个答案: