Question

我有一组jQuery UI AJAX选项卡，可以在单击时加载单个.php页面。我传达的所有样式都传达了，因为包含制表符小部件的页面提供了已经链接的CSS和脚本。当涉及到单击选项卡时加载的实际页面时，我无法看到让preventDefault（）与这些新创建的DOM元素一起使用.on（）。

我正在使用jQuery BBQ和我的标签，所以我不能将“＃”附加到URL。单击选项卡面板中的链接时会导致此问题。我已经能够成功地对最初加载的DOM元素使用preventDefault（），但不能通过AJAX将这些元素提取到tabs小部件中。

我对内容切换器的功能是......

$(function(){
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
    $(this).removeClass('clicked');
    $(this).prev().slideUp(500);
    $(this).html("Read More" + "<span class='moreUiIcon'></span>");
    }
    else {
    $(this).addClass('clicked');
    $(this).prev().slideDown(500);
    $(this).html("See Less" + "<span class='lessUiIcon'></span>");
    }       
}));
});

我想将此函数中的preventDefault（）组合到其中。

// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links
$(".showMoreOrLess").click(function (event) 
{ 
 event.preventDefault(); 
 //here you can also do all sort of things 
});
 // /prevents default behavior on "showMoreOrLess" links

我尝试了几种使用.on（“click”，function（work））等的方法。我在一个单独的函数中使用了.on（），并尝试将它组合在上面的第一个函数中。有谁知道我做错了什么？该代码适用于静态的选项卡内容，而不是通过AJAX加载的内容。任何帮助将不胜感激。似乎无法弄清楚这一点。提前谢谢。

Answer 1

部分$(".showMoreOrLess").click仅适用于您网页上已有的可访问链接

尝试使用事件委托（这里点击是在每次现有元素上捕获的，你只需传递它正在观察的选择器......作为一个很好的副作用，你可以节省听众

$(document).on("click", ".showMoreOrLess", function(event) {
  event.preventDefault(); 
  //here you can also do all sort of things 
});

而不是文档使用页面$("#myContainerId")中的某个ID（编辑：当然，您点击的元素需要位于具有ID的元素内）

Answer 2

$("body").on('click', ".showMoreOrLess", function(event) {
  event.preventDefault();
  var self = $(this);
  if (self.hasClass('clicked')) {
    self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500);
  }else {
    self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500);
  }
});

在jQuery AJAX选项卡中使用带有on（）的preventDefault（）

2 个答案: