jQuery UI button click event

Question

I'm having some very strange behavior with a jQuery UI button. It appears it is happening on chrome only.

I have to click twice to make it work. After further investigation, it seems I had to click outside the text (on the edges of the button), to make it work on first click. I have no elements inside the button - only text.

I am setting the text of the button with jQuery's text() method. When I changed it to html(), it started working as expected.

Although I have found a solution to the issue, I would be very interested in finding out why this happens. Another thing worth mentioning is that I tried to mimic this behavior with jsfiddle, but were unable to.

Code from jsfiddle (stackoverflow requires me to):

Html:

<button>click me</button>

code:

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

Answer 1

You need to wire this logic inside of document ready like this:

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

I have a working example inside of this fiddle.

Answer 2

You can just chain all this; put each on a line just to illustrate.

As to WHY you are seeing this issue: in chrome I do NOT see it on your fiddle; hard to tell if jQuery is actually ON that fiddle but is SEEMS to be? Unclear from the links on the left of the page. Can you update that to place these in actual HTML tags for the CSS and JS libraries ON the page.

OR better yet just create a snippet IN your question with that.

I DO note that your fiddle has invalid CSS i.e.

button {
  padding: 15px
}

This should be

button {
  padding: 15px;
}

Example:

$(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>

Second example with the delegate

$(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>

Answer 3

Try this:

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