jQuery: Weird issue with .on('click')

[WolfShade]

Hello, all,

I've got a weird issue with a jQuery .on('click') call.  It won't even trigger an alert.  The following is part of a Bootstrap v4 modal.

<button class="btn btn-primary" id="submitBtn" name="submitBtn">Submit</button>
<button class="btn btn-secondary" id="closeBtn" name="closeBtn">Close</button>
<!-- Here is where I'm loading jQuery, Bootstrap, and popper.js -->
<script type="text/javascript">
     $('#submitBtn').on('click',function(){
          alert("I have been clicked.");
          });
</script>

When I open the modal and click the submit button, I get no alert.  jQuery is loading properly.  Nothing is appearing in the error console.  Any thoughts?

V/r,

^ _ ^

[WolfShade · Accepted solution]

Nevermind.  Figured it out.  For some reason I am not allowed to use "submitBtn" as the name or ID of an element.

As soon as I changed it to "submitForm", it works.

Is this another quirk of Bootstrap or popper.js?

V/r,

^ _ ^

[osgood_]

WolfShade  wrote

Is this another quirk of Bootstrap or popper.js?

V/r,

^ _ ^

Have you got an instance of the id 'submitBtn' somewhere else in your code? If not then it should work.

[WolfShade]

I always name my submit buttons "submitBtn", so I don't know why it isn't working in this one instance.  But, then, this is the first time I've ever used Bootstrap.  I've got another form that will eventually be put in place (actually, now that I think of it, there will be two more), so I can try it, again, later.  But re-naming my submit button did the trick.

It's just weird.

V/r,

^ _ ^

[osgood_]

WolfShade  wrote

I always name my submit buttons "submitBtn", so I don't know why it isn't working in this one instance.  But, then, this is the first time I've ever used Bootstrap.  I've got another form that will eventually be put in place (actually, now that I think of it, there will be two more), so I can try it, again, later.  But re-naming my submit button did the trick.

It's just weird.

V/r,

^ _ ^

You do know you cant have more than one id on each page named as "submitBtn", only the first id will work if you have duplicate ids with the same name. What 'name' you give the buttons is different, as that has nothing to do with if Jquery works or not.

if you want each of your submit buttons to react to Jquery you can use duplicate class names  but not duplicate ids:

<button class="btn btn-primary submitBtn" name="submitBtn">Submit</button>

<button class="btn btn-primary submitBtn" name="submitBtn">Send</button>

The below jQuery will identify which 'submitButton' has been clicked and return  either 'Submit' or 'Send'

<script type="text/javascript">

$(document).ready(function(){

$('.submitBtn').click(function(){

var text = $(this).text()

alert(text);

});

});

</script>

Its highly likely that you will want each of your submit buttons to do different things so a unique id in that case is perfectly ok to use.

[WolfShade]

osgood_  wrote

You do know you cant have more than one id on each page named as "submitBtn", only the first id will work if you have duplicate ids with the same name. What 'name' you give the buttons is different, as that has nothing to do with if Jquery works or not.

I've been doing this since late 2000 (started out with Notepad, not the ++ one), I am well aware that IDs have to be unique.  Currently there is only one form (and only one "submitBtn") in the whole project (more to be added to other pages, later.)

The fact that even an alert wouldn't trigger when the submit button was named "submitBtn" is puzzling.  The only difference between this project and others I have worked on is Bootstrap, so it is easy for me to blame Bootstrap, being the only difference.  And it starts working when I change the name to something else.  Weird.

V/r,

^ _ ^

[osgood_]

WolfShade  wrote

osgood_   wrote

You do know you cant have more than one id on each page named as "submitBtn", only the first id will work if you have duplicate ids with the same name. What 'name' you give the buttons is different, as that has nothing to do with if Jquery works or not.

I've been doing this since late 2000 (started out with Notepad, not the ++ one), I am well aware that IDs have to be unique.  Currently there is only one form (and only one "submitBtn") in the whole project (more to be added to other pages, later.)

OK, I didnt know how familar you are with front end development.

WolfShade  wrote

The fact that even an alert wouldn't trigger when the submit button was named "submitBtn" is puzzling.  The only difference between this project and others I have worked on is Bootstrap, so it is easy for me to blame Bootstrap, being the only difference.  And it starts working when I change the name to something else.  Weird.

Something appears to be conflicting in your code because if I use the code you supplied it works perfectly with the id "submitBtn"

[WolfShade]

I miss FireBug.  The DevTools in FF is nice, but in FireBug I could view all the elements to see if there were any conflicts.  If DevTools can do that, I haven't found the link, yet. 

V/r,

^ _ ^