Question

我在使用JQuery选择器处理一些以编程方式生成的div

时遇到了一些麻烦

我正在使用google visualization table来显示一些查询结果，每页显示20个结果。当查询返回超过20个结果时（仅当结果超过20时），搜索结果窗格底部会出现分页按钮。

<div class="google-visualization-table-div-page">
  <div class="a-b-c a-d-e a-d-e-j a-d-e-o-p" title="" aria-disabled="true"
  role="button" style="-moz-user-select: none;">
    <div class="a-b-c a-d-e-f-g">
      <div class="a-b-c a-d-e-h-g">&lt;&lt;</div>
    </div>
  </div>
<div class="a-b-c a-d-e a-d-e-o-q" title="" role="button" 
style="-moz-user-select: none;" tabindex="0">
  <div class="a-b-c a-d-e-f-g">
    <div class="a-b-c a-d-e-h-g">&gt;&gt;</div>
  </div>
</div>
</div>
</div>

我的目标是将相同的分页按钮添加到窗格的顶部。不幸的是，复制并粘贴结果窗格上方的div并不起作用，所以我的计划是使用jquery的click事件让顶部的复制/粘贴按钮以编程方式单击底部的按钮。

我的按钮与上面div中的按钮完全相同，只是增加了id。

<div id="top_prev" class="a-b-c a-d-e a-d-e-j a-d-e-o-p" style="-moz-user-select: none;" role="button" aria-disabled="true" title="">

<div id="top_next" class="a-b-c a-d-e a-d-e-o-q" tabindex="0" style="-moz-user-select: none;" role="button" title="">

不幸的是我试过的jquery不起作用，而我正在调试我认为我偶然发现了问题。这是我的调试JQuery：

$(document).ready(function()
{
$("#top_prev").click(function(){
       if ($(".a-b-c a-d-e a-d-e-j a-d-e-o-p").length ) {
          alert("top_prev success");
        }else
        {
          alert("top_prev fail");
        }
});

$("#top_next").click( function() {
if ($(".a-b-c a-d-e a-d-e-o-q").length )
{
   alert("top_next success");
}else
{
alert("top_next fail");
}
});

即使正在生成这些div，也会出现“top_next fail”或“top_prev fail”框。在生成结果窗格之后，甚至生成按钮的javascript和html，因此应该在顶部按钮之前生成底部按钮。

我想我很难过为什么那些选择器不起作用。这是我尝试的原始.click jquery：

$(document).ready(function(){ $("#top_prev").click(function(){ $(".a-b-c a-d-e a-d-e-j a-d-e-o-p").click(); }); $("#top_next").click(function() { $(".a-b-c a-d-e a-d-e-o-q").click(); }); });

Answer 1

问题是因为你的选择器匹配底部的元素是错误的。

你应该使用;

$(document).ready(function(){
    $("#top_prev").click(function(){
      $(".a-b-c.a-d-e.a-d-e-j.a-d-e-o-p").not(this).click();
    });

    $("#top_next").click(function() {
      $(".a-b-c.a-d-e.a-d-e-o-q").not(this).click();
    });
});

.foo .bar形式的选择器将所有元素与bar类匹配，后者是具有类foo (the descendant selector)的元素的后代。相反，您应该使用.foo.bar来搜索包含foo和bar类的所有元素。

Answer 2

另一种方法是克隆现有的按钮......

（我假设您提供的html仅用于分页按钮。）

var $paging = $("google-visualization-table-div-page").clone(true);
$("#containerID").append($paging);

containerID将是您添加到页面的div或span的ID，并且按钮将附加到该页面上。

这是克隆和追加的参考......

无法使用JQuery选择以编程方式生成的按钮

2 个答案: