jQuery UI按钮点击事件

Question

我使用jQuery UI按钮有一些非常奇怪的行为。它似乎只发生在铬上。

我必须点击两次才能使它工作。经过进一步的调查，我似乎不得不点击文本外部（按钮边缘），以使其在第一次点击时工作。按钮中没有任何元素，只有文本。

我使用jQuery的text（）方法设置按钮的文本。当我将其更改为html（）时，它开始按预期工作。

尽管我已经找到了这个问题的解决方案，但我很有兴趣找出为什么会发生这种情况。另一件值得一提的事情是，我试图用jsfiddle模仿这种行为，但没有成功

代码来自jsfiddle（stackoverflow要求我）：

Html:

<button>click me</button>

代码：

$("button").button().click(function(){ 
    $("body").append("clicked ");
})
.text("click me!");

Answer 1

您需要在文档内部连接此逻辑，如下所示：

$(document).ready(function() {
    $("button")
        .button()
        .click(function(){ 
            $("body").append("clicked ");
        })
        .text("click me!");
});

我在这把小提琴里面有一个工作的例子。

Answer 2

试试这个：

$(document).ready(function() {
    $("button")
        .click(function(){ 
            $("body").append("clicked ");
        })
        .text("click me!");
});

Answer 3

您可以将所有这些链接起来；把每个放在一条线上只是为了说明。

至于你为什么会看到这个问题：在chrome中，我没有在你的小提琴上看到它很难说jQuery是否真的在那个小提琴上，但看起来是这样吗？从页面左侧的链接中松开。你能更新一下吗，把这些放在页面上CSS和JS库的实际HTML标记中。

或者最好在你的问题中创建一个片段。

我注意到你的小提琴有无效的CSS，即

button {
  padding: 15px
}

这应该是

button {
  padding: 15px;
}

示例：

$(function() {
  $('button')
    .button()
    .on('click', function(event) {
      $("body").append("<div>clicked</div>");
    })
    .text('Click me!');
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/cupertino/jquery-ui.min.css" integrity="sha512-9SEz2+WNpf9iyTy855xgweUvhu8Rz9BnU4d/MBFSFSh4kaAFeCA+/Otj5/NaB9PiMpjO1ajRNbplQTXa182X9A==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button>click me</button>

代表的第二个示例

$(function() {
  $('.my-container').find(".my-button")
    .button().text('Click me!');
  $('.my-container').on('click', '.my-button', function(event) {
    $(event.delegateTarget)
      .find('.results')
      .append("<div class='fun'>clicked</div>");
  });
});

.my-container {
  display: grid;
  border: solid 1px $00FF00;
}
.my-container .results {
  border: solid 1px #0000FF;
}
.fun {
  background-color: #0000FF11;
  margin: 1rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/cupertino/jquery-ui.min.css" integrity="sha512-9SEz2+WNpf9iyTy855xgweUvhu8Rz9BnU4d/MBFSFSh4kaAFeCA+/Otj5/NaB9PiMpjO1ajRNbplQTXa182X9A==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="my-container">
  <div>
    <button class="my-button">click me</button>
  </div>
  <div class="results"></div>
</div>