基本的jquery问题答案

【问题标题】：basic jquery problem基本的jquery问题
【发布时间】：2011-08-26 18:43:12
【问题描述】：

我刚刚浏览了 JQuery 的 w3schools 教程。我正在尝试在 seam/richfaces 应用程序中编写函数。我有一个搜索图标和搜索图标的单击，我想在 UI 中切换某些字段。但是什么也没发生，我在萤火虫中看不到任何错误。请帮忙。

<rich:dataTable id="acctListTbl" value="#{accounts}" var="account" width="100%">
    <rich:column>
   <f:facet name="header">
    <h:panelGroup>
         <h:graphicImage id="srchIcon" value="/images/search_icon.png" 
                             styleClass="search-icon"/> 
            <h:outputText value="Action" />
        </h:panelGroup>
   </f:facet>

 <script type="text/javascript">
    jQuery(document).ready(function(){
  jQuery("#acctListTbl:srchIcon").click(function(){
      jQuery('.search-field').toggle(); 
  });
 });
 </script>

这里是html。正如 user914670 所指出的，我的搜索图标渲染中没有添加任何 jquery 处理程序。那么有什么问题呢？

 <div id="j_id12:acctListTbl:j_id31header:sortDiv">
    <img id="j_id12:acctListTbl:srchIcon" class="search-icon"  
         src="/xxxx/images/search_icon.png">
         Action
 </div>

【问题讨论】：

你能显示呈现的 HTML 而不是生成它的服务器端代码吗？
我没有看到 .search-field 类的元素
我不推荐使用 w3schools 作为 jQuery 资源。 w3fools.com
虽然没有显示搜索字段存在并且可以正常使用 javascript。添加 onclick="toggleSearchFields();"在搜索图标中并编写 javascript 函数 toggleSearchFields(){ jQuery('.search-field').toggle(); }
@user238021：您可能需要进行更多调试。您在 FireBug 中看不到任何错误，这很好。但是你看到了什么？当文档加载时，jQuery 是否在任何元素上匹配 #acctListTbl:srchIcon 以绑定事件？如果是这样，当事件被触发时，.search-field 是否匹配任何元素？

标签： jquery richfaces

【解决方案1】：

您的标记中没有类 .search-field

【讨论】：

.search-field 在 xhtml 中可用。如果我用 onclick="toggleSearchFields();" 替换 Jquery并编写javascript，一切都很好。函数 toggleSearchFields(){ jQuery('.search-field').toggle(); }

【解决方案2】：

jQuery(document).ready(function(){   
      jQuery(".search-icon").click(function(){       
              jQuery('.search-field').toggle();    
       });  
});

或者，如果你喜欢 ids，你可以这样做

jQuery(document).ready(function(){   
      jQuery("[id$=srchIcon]").click(function(){       
              jQuery('.search-field').toggle();    
       });  
});

$= 表示以

结尾

^= 表示以

开头

*= 表示包含

我还会查看 SelectorGadget 以在 Firefox 中使用。它非常适合找到获取某个元素所需的选择器语句。

为了确保我在事件中，我做的最后一件事是在函数中放置一个警报语句，让我知道我的选择语句是正确的。

【讨论】：

【解决方案3】：

我的理解是，当您使用冒号跟随类或 id 时，您正在寻找具有特定属性的元素，而 srchIcon 不是属性。

我相信您对 jQuery('#acctListTbl:srchIcon') 的意图如下：
jQuery('#acctListTbl #srchIcon)

也就是说，目标是 ID 为 acctList 的元素内的 ID 为 srchIcon 的元素。

这可能是您的问题的一部分。

希望对您有所帮助。

【讨论】：

【解决方案4】：

jQuery("#acctListTbl:srchIcon") 只需为jQuery("#srchIcon")

因为 id 在页面上是唯一的，所以它们不需要限定。判断 Jquery 是否正在创建事件处理程序的一种简单方法是查看您呈现的代码并查看您的图像是否具有 JQuery="{some random numbers}" 标签。

【讨论】：

未创建事件处理程序。知道为什么吗？
你能发布你渲染的图片的html吗？
动作
AAh 它需要是 jQuery('#j_id12:acctListTbl:srchIcon') 。我不确定 jQuery 将如何处理冒号。如果失败了，你也可以尝试 jQuery('.search-icon') 如果这是唯一使用该类的地方