0

我有一组 jQuery UI AJAX 选项卡，它们在单击时加载单个 .php 页面。我的所有样式等都传达了，因为包含选项卡小部件的页面提供了已经链接的 CSS 和脚本。然而，当谈到单击选项卡时加载的实际页面时，我看不到在这些新创建的 DOM 元素上让 preventDefault() 与 .on() 一起使用。

我在标签中使用 jQuery BBQ，所以我不能将“#”附加到 URL。这是在单击选项卡面板中的链接时引起的。我已经能够在最初加载的 DOM 元素上成功使用 preventDefault() ，但不能通过 AJAX 将其提取到选项卡小部件中。

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

$(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 加载的内容。任何帮助将不胜感激。似乎无法弄清楚这一点。提前致谢。

4

2 回答 2

1

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

尝试使用事件委托（这里每次都会在现有元素上捕获点击，并且您只需传递它正在监视的选择器......作为一个很好的副作用，您可以保存侦听器

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

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

于 2012-04-23T19:22:25.587 回答
0 
$("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);
  }
});
于 2012-04-23T19:30:03.503 回答