Question

Jquery - 如何调用此链接上的点击事件

2017-02-19

637

javascript jquery

我的 html 看起来像这样

<li>
     <div class="patient-details">
                   <span class="patent-name-heading">
                        <a id="Will simth" href="---- "?patientId=12</a>
                  </span>
      </div>
  </li>

请注意，id 中有一个空格。

我试过这个

 $("#patientSelection li").click(function() {
            var res = $(this).find(".patent-name-heading a").attr("id");
            var url=  "#" + res  ;
            console.log(url);
            $(url).click();
         });

我也试过这个

 $("#patientSelection li").click(function() {
   $(this).find(".patent-name-heading a").click()
});

我收到错误

Uncaught RangeError: Maximum call stack size exceeded
    at RegExp.exec (<anonymous>)
    at RegExp.[Symbol.match] (<anonymous>)
    at String.match (native)
    at HTMLLabelElement.<anonymous> (https://code.jquery.com/jquery-1.11.3.min.js:5:14722)
    at Function.each (https://code.jquery.com/jquery-1.11.3.min.js:2:2975)
    at m.fn.init.each (https://code.jquery.com/jquery-1.11.3.min.js:2:835)
    at m.fn.init.toggleClass (https://code.jquery.com/jquery-1.11.3.min.js:5:14581)

但是它不起作用。有什么建议吗？

Answer 1

由于您的 id 属性值包含空格，因此它不起作用，生成的选择器将是 #Will simth ，它在元素中搜索标签 simth ，其 ID 为 Will 。

而是直接触发点击事件或使用 \\ 转义 id 选择器中的空格。

$("#patientSelection li").click(function() {
   $(this).find(".patent-name-heading a").click()
});

要转义空格，您可以使用 String#replace 方法或使用属性等于选择器。

$(url.replace(/ /g,'\\ ')).click();
// or
$('[id="' + url + '"]').click();

更新： 为防止事件冒泡到 DOM 树，请使用 event.stopPropagation() 方法或使用 event.target 属性不是 a 标签noreferrer"> is() 方法。

$("#patientSelection li").click(function() {
   $(this).find(".patent-name-heading a").click()
}).find(".patent-name-heading a").click(function(e){
   e.stopPropagation()
});

或

$("#patientSelection li").click(function(e) {
  if(!$(e.target).is('.patent-name-heading a'))
    $(this).find(".patent-name-heading a").click()
})

Answer 2

只需使用 span 作为点击区域，选择 class 属性而不是 ID，并使用 href 属性而不是 ID：

 $(".patent-name-heading").click(function() {
            var res = $(this).find(".patent-name-heading a").attr("href");
            var url=  "#" + res  ;
            console.log(url);
            $(url).click();
         });