How to use unobtrusive JavaScript approach to call a function using anchor tag?

Question

There are number of questions on this and I tried them out. However I am having an issue with the following anchor tag which acts as a button. Why isn't the link click event calling the function?

try 1:

<a href="#" class="btn" id="btnSubmit" data-type="submit">Submit</a>

try 2:

<a href="javascript:void(0)" class="btn" id="btnSubmit" data-type="submit">Submit</a>

js code:

<script>
    $("#btnSubmit").click(function(){
        dbdata = <%=jsscripts()%>;  
        addAll(0, this);
    });
</script>
<script type="text/javascript" src="cart_Test.js"> </script>

NOTE:

Please note that this particular js function works well when it's called under the DOM load event listener.

UPDATE:

dbdata is an array and addall() is a function defined in the cart_Test.js file. It seems, following script is not fired after the click function event.

<script type="text/javascript" src="cart_Test.js"> </script>

The order of the js:

<script>
    document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);    
    function theDomHasLoaded(e) {
         //datepicker stuff
}
</script>

<script>    

    $("#btnSubmit").click(function(){    
});

<script type="text/javascript" src="cart_Test.js"> </script>

Is the click-event not called at all or is the function `addAll()` not executed ? Both of them seems to work: [demo](http://jsfiddle.net/kz0ny6g8/) — empiric, Jun 03 '15 at 06:27
have you tried wrapping your event-handler in the `$(document).ready()`-function ? — empiric, Jun 03 '15 at 06:29
@empiric At first I tried `on-click` event with `$(document).ready()`. Then I came across this un-obstructive approach as a better one. So I tried it with both document and ready and on plain function as stated above. It doesn't fire the js function. I did an alert too. — aspiring, Jun 03 '15 at 06:30
@Cerbrus Before separating the function to be executed from anchor, it was triggered by DOM load event. Right after this function, the entire JS file is also called `cart_Test.js`. I noticed after executing the functions under anchor, it doesn't seem to fire the js file. What could be happening here? — aspiring, Jun 03 '15 at 06:44
Place `<%=jsscripts()%>` in quotes. Your code is giving error : `Uncaught SyntaxError: Unexpected token <` - [ http://jsfiddle.net/JavaUIDeveloper/agp3ux0h/ ] — Kurenai Kunai, Jun 03 '15 at 06:46
Well above exact code started to work the moment I removed a script that was above this code snippet. It seemed as if the programme is demanding this script to be executed. — aspiring, Jun 03 '15 at 07:05
Where and in which order are you including your scripts? jQuery should be included first, then cart_Test and, then, your script. Also, you should use `.on('click'` instead of `.click(` — briosheje, Jun 03 '15 at 07:50
@briosheje in above order, as mentioned the anchor click and function works. But the `datepicker` isn't working. — aspiring, Jun 03 '15 at 07:57
Did you check the include order? As long as the click is working you can check your javascript console to understand where the problem is. — briosheje, Jun 03 '15 at 08:03
For the question I posted above, I no longer needs an answer, since it's already solved as per my comments above. However I will take your comment to debug the issue on `datepicker` cheers. — aspiring, Jun 03 '15 at 08:04
@freedomn-m All I know that removing the jquery `datepicker` code allowed the execution order of this code snippet. — aspiring, Jun 03 '15 at 08:19
That's fine. http://stackoverflow.com/help/self-answer It simply allows the question to be marked as answered so people don't try to find the issue (when it's already been found but hidden away in the comments) and anyone with a similar issue can find the solution easily. — freedomn-m, Jun 03 '15 at 08:24

score 1 · Answer 1 · answered Jun 03 '15 at 10:26

Well, I am adding an answer since this is how I got it solved. It could be the order of execution.

There was a script snippet for a jQuery UI datepicker. Somehow it was blocking above stated scripts which are supposed to be the first scripts to be run in this page.

After removing the datepicker script (it can be any other script, not necessary a datepicker.) and adjusted the order of execution, the programme flow was back to normal and all scripts were firing as expected.

How to use unobtrusive JavaScript approach to call a function using anchor tag?

1 Answers1