[Solved] Multiple jQuery Scripts in one HTML page Not working together

by


It’s a common global variable conflict issue. You can (must) wrap them all to self-executing function, which will keep all declared variables inside its own.

(conflict):

var test = $('#btn-1').text();
$('#btn-1').on('click', function(){ console.log( test ); });

var test = $('#btn-2').text();
$('#btn-2').on('click', function(){ console.log( test ); });

var test = $('#btn-3').text();
$('#btn-3').on('click', function(){ console.log( test ); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn-1">111</button>
<button id="btn-2">222</button>
<button id="btn-3">333</button>

(no conflict):

(function(){
  var test = $('#btn-1').text();
  $('#btn-1').on('click', function(){ console.log( test ); });
})();

(function(){
  var test = $('#btn-2').text();
  $('#btn-2').on('click', function(){ console.log( test ); });
})();

(function(){
  var test = $('#btn-3').text();
  $('#btn-3').on('click', function(){ console.log( test ); });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn-1">111</button>
<button id="btn-2">222</button>
<button id="btn-3">333</button>

But in your case, at least would be better to run everything in loop (or adding a general class for all elements and loop with $('.class').each(function(){/*...*/})):

for( var i = 2; i < 5; i++ ){
  doStuff( i );
}

function doStuff( index ){
  var options = $("#DropDownList" + index).html();
  $('#DropDownList' + index + ' :not([value^="Dr"])').remove();
  $('input:radio').change(function(e) {
    var text = $(this).val();
    $("#DropDownList" + index).html(options);
    $('#DropDownList' + index + ' :not([value^="' + text.substr(0, 3) + '"])').remove();
  });
}

Here was used the function as well, to “keep” variables inside.

3

solved Multiple jQuery Scripts in one HTML page Not working together