调试和控制台日志

Question

我在使用innerHTML访问jQuery媒体资源时遇到了典型情况。我已经使用jQuery属性选择器获取了目标按钮。

以下是jQuery属性选择器的片段。

jQuery('button[type="button"][class="btn btn-primary"]').each(function () {
            var btn = jQuery(this);
            console.log(btn);
            if (btn[0].innerHTML === "OK") {
                console.log("ok");
                jQuery(this).click();
            }
});

以下是目标按钮的控制台日志的屏幕截图。它的innerHTML属性设置为OK。

以下是调试目标按钮对象时innerHTML的值的屏幕截图。在这种情况下，值为""。

理想情况下，两种情况下innerHTML的值应相同。

修改 为什么这种行为与理想行为不同？对于这两种情况，innerHTML的值应该相同。

此外，还有多个按钮。我拍了不同按钮的截图。因此他们的ID's是不同的。但是，行为仍然是一样的。

Answer 1

尝试这样的事情。

function SomeEvent($ele) {
  alert($ele.html());
  return false;
}

function invokeBtnEvents() {
  $("[data-action=some-event]").off(); // clear old events
  $("[data-action=some-event]").on("click", function() {
    var $this = $(this);
    return SomeEvent($this);
  }) // define event(s)
  return false;
}
$(document).ready(function() {
  invokeBtnEvents();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <br />
      <button data-action="some-event" class="btn btn-primary">Button 1</button>
      <button data-action="some-event" class="btn btn-primary">Button 2</button>
      <button data-action="some-event" class="btn btn-primary">Button 3</button>
      <button data-action="some-event" class="btn btn-primary">Button 4</button>
    </div>
  </div>
</div>

您的问题

我认为您正在做的主要问题是$ .each（）方法。

将按钮存储在变量

中

let $button = $("button"); // this returns an array of all the buttons on the DOM

然后，您可以使用$.each()方法获取点击的元素

$.each($button, function(index, btn){
    const $this = $(btn);
    $this.off();
    $this.click(function(){someEvent($this)});
});

我不会像这样调用按钮点击，因为每次时单击一个按钮，每个循环都会运行。然后它会将所有按钮发送到该操作，除非您通过ID或其他东西进行解析（您正在使用innerText）。

如果您使用我的代码段中的代码，则只会触发点击的按钮。

我的第一个片段的另一种方法是使用像调度程序这样的东西。

function DoActionOneClick($ele){
  alert("Action 1 " + $ele.html());
}

function DoDefaultClick($ele){
  alert("Default Action " + $ele.html());
}

function DispatchEvent(action, $ele){
  switch(action){
    case "some-event-1":
      DoActionOneClick($ele);
      break;
    default:
      DoDefaultClick($ele);
      break;
  }
}

function invokeActions(){
  $("[data-action]").off();
  $("[data-action]").on("click", function(){
    // get this
    var $this = $(this);
    // get action
    var action = $this.data().action;
    DispatchEvent(action, $this);
  });
}

$(document).ready(function(){
  invokeActions();
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <br />
      <button data-action="some-event-1" class="btn btn-primary">Button 1</button>
      <button data-action="some-event-2" class="btn btn-primary">Button 2</button>
      <button data-action="some-event-2" class="btn btn-primary">Button 3</button>
      <button data-action="some-event-2" class="btn btn-primary">Button 4</button>
    </div>
  </div>
</div>