时间戳

首页 > 解决方案 > jQuery如何选择带有特定文本的按钮

jquery - jQuery如何选择带有特定文本的按钮

问题描述

我在对话框中有一个按钮，对话框建立在一个 div 上，该 div 有一个 id。我试过这个：

    $("#idOfDiv button:contains(\"Submit\")").trigger("click");

当按下“Enter”键时，这会在按键处理程序中调用。不幸的是，它不起作用。HTML 看起来像这样：

      <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-osx ui-dialog-buttons ui-draggable" 
         style="height: auto; width: 320px; top: 526px; left: 543px; display: block;"
         tabindex="-1" role="dialog" 
         aria-describedby="selindividual" 
         aria-labelledby="ui-id-1">
        <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle">
          <span id="ui-id-1" class="ui-dialog-title">
            Select Individual
          </span>
          <button type="button" 
                  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close"
                  role="button" 
                  title="Close">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <span class="ui-button-text">Close</span>
          </button>
        </div>
        <div id="idOfDiv" style="width: auto; min-height: 0px; max-height: none; height: 48px;" class="ui-dialog-content ui-widget-content"><div class="dialog-panel">
          <p class="dlgline">Select individual:
            <select id="biPersonID">
              <option value="0">Create new resume</option>
              <option value="1">Name A</option>
              <option value="2">Name B</option>
            </select>
          </p>
        </div>
      </div>
      <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
          <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
            <span class="ui-button-text">Submit</span>
          </button>
        </div>
      </div>
    </div>

[编辑] 也许它的事件处理程序？：

    $("#idOfDiv").keypress(function(e) {
      if ( e.keyCode == $.ui.keyCode.ENTER ) {
        $("#idOfDiv button:contains(\"Submit\")").trigger("click");
      }
    });

[Edit#2] 如果我在表达式上设置了监视，我正在使用 Mozilla 及其开发人员工具来调试它：

    $("#idOfDiv button:contains(\"Submit\")")

在 Watch 表达式面板中，我看到了手表并展开它显示：

    context: HTMLDocument http://localhost:8000/?cnt=ceresume
    length: 0
    prevObject: {...}
    selector: "#idOfDiv button:contains(\"Submit\")"
    <prototype>: {...}

长度：0 告诉我这是不正确的。

[Edit#3] 我正在使用 jQuery 对话框类：

    $("#idOfDiv").dialog({modal:true
                     ,draggable:true
                     ,resizable:false
                      ,position:{my:"center", at:"center", of:window}
                          ,show:"blind"
                          ,hide:"blind"
                         ,height:140
                          ,width:320
                    ,dialogClass:"ui-dialog-osx"
                        ,buttons:{"Submit":function() {
    /* Stuff to do on submit */
    }}});

标签： jqueryhtml

解决方案

缺少括号和右双引号：

$("#idOfDiv button:contains(\"Submit\").trigger("click");
                                    ^^^

正确的格式是：

$("#idOfDiv button:contains(\"Submit\")").trigger("click");
                                      ^^

根据您更新的答案，您正在寻找下一个元素下包含特定文本的按钮。因此，选择是：

$("#idOfDiv").next('.ui-dialog-buttonpane').find("button:contains(\"Submit\")")

推荐阅读