JQuery: click event not firing

Question

I have created this small 'modal'-form using bootstrap which looks a bit as follows:

<div class="modal fade"  tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="H1">Create new Workflow</h4>
      </div>
      <div class="modal-body">
        <ul class="list-group">
          ....
          <li class="list-group-itemCustom">
                 <input type="text" id="txtWorkflowAdmin" />
         </li>
          ...
        </ul>
      </div>
      <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
           <button type="button" id="BtnSave" class="btn btn-primary">Save</button>
     </div>
     </div>
    </div>

The modals are stored in a separate aspx-page. I retrieve the modals using a ajax-call after which i bind the event-handlers:

function LoadModals() {
    $.ajax({
        type: "GET",
        url: "Modalforms.aspx",
        success: function (data) {
            $("#Divmodals").html(data);
            SetModalEventtriggers();
        },
        error: function (xhr, errStatus, thrownError) {
            LogException(errStatus, thrownError, "LoadModals", []);
        }
    })
}

function  SetModalEventtriggers() {
        $("#txtWorkflowAdmin").blur(function () {
            CheckAdmin($(this));
        })

        $("#BtnSave").click(function () {
            SaveWorkflow();
        })
}

Those 2 events work perfectly independent. Example When i click the button (BtnSave) without txtWorkflowAdmin is focussed then the function SaveWorkflow gets executed.

Yet when my txtWorkflowAdmin is focussed and i click BtnSave. Then .Click Function isn't fired. The function of the OnBlur get executed though. When i click a second time on BtnSave then the SaveWorkflow is executed.

Why does this behavior occur? Am I missing some basic knowledge about Javascript-events?

The Functions (Basic code supplied: errorhandling deeper code not included) :

function SaveNewWorkflow() {

        ... (Check if other fields are filled in

        if (!CheckValidityUsername($("#txtWorkflowAdmin").val())) {
            $("#WorkflowAdminErrorMessage").css("display", "block");
            return;
        }

        ... (If all fields are filled in => This piece of code is never reached when   txtWorkflowAdmin is focussed)
        $.ajax({
            type: "POST",
            url: "Actions.aspx",
            data: outerJsonData,
            success: function () {
               ... Do some actions here. 
           }}) 
 }

function CheckAdmin(txtAdmin) {
    // Show/Hide errormessage
    if (!CheckValidityUsername(txtAdmin.val())) {
        btnClicked.closest("li").prev().css("display", "block");
    }
    else {
        btnClicked.closest("li").prev().css("display", "none");
    }
}


function CheckValidityUsername(userName) {
    var validUser = true;
    var jsonData = { action: "CheckUsername",
            SidUser: userName,
            Docbase: docbase
        };

    $.ajax({
        type: "GET",
        async: false,
        url: "Search.aspx",
        data: jsonData,
        success: function (data) {
            var obj = jQuery.parseJSON(data);
            validUser = obj.ValidUser;
            return validUser;
        },
        error: function (xhr, errStatus, thrownError) {
            LogException(errStatus, thrownError, "CheckValidityUsername", jsonData);
        }
    })

    return validUser;
}

Thanx to anyone who was helping me! Thanks to you guys, the problem was quickly resolved!

might be a good idea to include the code of those functions? maybe some of it is interfering with the click event in some way or another... — benomatis, May 30 '14 at 07:22
I'll include the most basic code behind the function (not all). As it would be too much — User999999, May 30 '14 at 07:30
The modals are stored in a separate aspx-page. After the ajax-call to that aspx-page (GET) is completed then I bind the events to the controls. i'll add it to the post. — User999999, May 30 '14 at 07:43

Bhojendra Rauniyar · Answer 1 · 2014-05-30T07:46:10.747

0

Try using preventDefault:

$("#BtnSave").click(function (e) {
        e.preventDefault();
        SaveWorkflow();
    })

Update:

I think this should work:

$("#BtnSave").click(function () {
    CheckAdmin($("#txtWorkflowAdmin"));
    SaveWorkflow();
})

edited May 30 '14 at 07:46

answered May 30 '14 at 07:25

Bhojendra Rauniyar

83,432
35
168
231

why preventDefault? he is telling as, the event handler itself is not firing right? – kriznaraj May 30 '14 at 07:28
Something preventing to click so using preventDefault might help. – Bhojendra Rauniyar May 30 '14 at 07:31
OP has clearly mentioned `click` is not firing when you first click the `$("#txtWorkflowAdmin")` so now focus is on this button when you click on `$("#BtnSave")`, blur event fired first. `mousedown` will work here. – Jai May 30 '14 at 07:34
@Jai as i commented under your answer, `mousedown` only works with `alert` apparently... – benomatis May 30 '14 at 07:42
@webeno i just comment against your comment with a fiddle to test. – Jai May 30 '14 at 07:46

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Instead of click try with mousedown:

$("#BtnSave").mousedown(function () {
    SaveWorkflow();
});

Because blur is getting fired before click.

Demo

Why does this behavior occur?

See when you click/focus on $("#txtWorkflowAdmin") button then this button gets the foucs and as you have bound a blur event to it, .blur() always gets fired first against click. you can see the below two lines what is happening and what you can do here:

click event works when you release the left mouse button.
while mousedown only looks for a push of left mouse button.

As @webeno commented this is another fiddle to checkout that mousedown is working first:

Demo @ fiddle

Although this can also be done with a setTimeout() method:

function CheckAdmin(txtAdmin) {
  setTimeout(function(){
     // Show/Hide errormessage
     if (!CheckValidityUsername(txtAdmin.val())) {
       btnClicked.closest("li").prev().css("display", "block");
     } else {
       btnClicked.closest("li").prev().css("display", "none");
     }
  }, 1000);
}

Demo with setTimeout() method

edited Jun 20 '20 at 09:12

Community

1
1

answered May 30 '14 at 07:26

Jai

74,255
12
74
103

@C-link because i think click happens when you release the left mouse button while mousedown only looks for pushing the left button. – Jai May 30 '14 at 07:29
your solution will only work for alert, try a text() and it will be different http://jsfiddle.net/2Jgfr/1/ – benomatis May 30 '14 at 07:37
sorry, it's still not working, the first function is supposed to output what you add into the field but it doesn't, it still only triggers the 2nd function, ie. the alert... – benomatis May 30 '14 at 07:56
@webeno yeah just got it where it is failing i think this needs a timeout function. not sure but can be tested. – Jai May 30 '14 at 07:57
Anyhow it seem to be compatible with my code. So i'm quite happy. The mousedown did apparently resolve my problem. Although the order of executing may have changed, this has no impact at all to the correct flow inside my web application. Cheers Mate! – User999999 May 30 '14 at 07:59

JQuery: click event not firing

2 Answers2

Demo @ fiddle

Demo with setTimeout() method