CODEWITHSUNDEEP
javascriptphpjqueryhtmltwitter-bootstrap
theuseduser
theuseduser

Reputation: 65

I can't trigger custom event from Javascript

I've got a page running with a div, into which I load a php page. In this PHP page, I do various things, one of which is, for example, to change a password. When you click "save", it runs the following (I've taken everything away except for the important bit).

function resetPass() {
    $(document).trigger("set-alert-id-password", [
      {
        message: "Must be at least 6 characters long",
        priority: "error"
      }
    ]);
}

This is using a Bootstrap library called bsFormAlerts, and is meant to show an alert under the input field created here on the PHP page.

<input type="password" class="form-control" disabled="true" value="******">
<span class="input-group-btn">
    <button class="btn btn-default" type="button" onclick="resetPass(this);">
        <i class="glyphicon glyphicon-edit"></i>
    </button>
    <span data-alertid="password"></span>
</span>

This works fine if this input is on the index.html page, but since it is in a PHP file that gets .load()'d into a div on the HTML page it doesn't call.

My question: is there some way that I can call into the div which has now .load()'d another file, as it doesn't seem to call through to it? Anything else I can try?

Thanks in advance

Upvotes: 0

Views: 97

Answers (2)

Terry
Terry

Reputation: 66103

Because the button is dynamically added and is not present when the DOM tree is ready, the event will not bind. You should also avoid using inline JS but migrate that over to event binding using .on().

First, we remove the inline JS for your button:

<input type="password" class="form-control" disabled="true" value="******">
<span class="input-group-btn">
    <button class="btn btn-default" type="button">
        <i class="glyphicon glyphicon-edit"></i>
    </button>
    <span data-alertid="password"></span>
</span>

The we use .on() to bind the click event to your button:

$(document).on('click', '.btn.btn-default', function() {
    $(document).trigger("set-alert-id-password", [
      {
        message: "Must be at least 6 characters long",
        priority: "error"
      }
    ]);
});

The purpose of doing so is to listen for the click event that originates from your button (with the class btn and btn-default [1] that eventually bubbles up to the document object, so it can originate even from a dynamically added element that is initially not present (before .load() was executed, for example).

1 I have a feeling that the classes assigned to the button is generic, so you should include a unique identifier (like an ID) to select it unambiguously in jQuery.

Upvotes: 1

Alex Shilman
Alex Shilman

Reputation: 1547

Im not sure if i understand you correctly but Try something like this this:

$( "#page-wrapper" ).load( "ajax/test.html", function() {
  $(document).trigger("set-alert-id-password", [
  {
    message: "Must be at least 6 characters long",
    priority: "error"
  }
]);
});

Upvotes: 1

Related Questions