DDJ DDJ - 5 months ago 11
Javascript Question

How should you load 2 jquery javascript files to make sure they don't conflict, and the have them handle button clicks independant of each other?

I am trying to get a button click to pop up an alert. The alerts pop up if I run alert ("works"); outside the $(document).ready(function(){});

I am not sure what I am missing or if you have to load the second .js file differently? I am using jquery 1.12.2.

<script type="text/javascript" src="answer_audit_modals.js"></script>
<script type='text/javascript' src='../app/assets/js/audit/perform_audit1.js'></script>


This is inside the answer_audit_modals.js

$(document).ready(function(){
alert("test");
});


This is inside the perform audit:

$(document).ready(function(){
$("#upload_files123").click(function() {
alert ("works");
});
});


Here is the HTML where I do load bootstrap and it works for everything else:

<a href ="" "type="button"
class="btn btn-danger btn-xs"
id="#upload_files123"
value="Test">test</a>


Here is the bootply trying to make the button click work:

http://www.bootply.com/D9onNOUNsR

Answer

Your files didn't conflict.

You're wrong in id="#upload_files123". It should be just id="upload_files123"