javascript - Jquery 2 scripts aren't cooperating -

i have 2 jquery scripts, aren't cooperating, , dont know why. first script "scrolltop.js:

    $(function() {     $("a").click(function(){         alert("test");         var target = $(this).attr('href');         var strip = target.slice(1);         if(this.hash && strip=="wall_menu"){         $("html, body").animate({             scrolltop: $("#wall_menu").offset().top         }, 1200);         return false;         }     }); }); 

it works fine... stops while add script "changecolor.js":

$(document).ready(function() {     var $changebtn1 = $("#content_0 div.button1");     var strnewstring = $('body').html().replace(/\is/g,'<spon>is</spon>');     $('body').html(strnewstring);     $(".button1").click(function(){         $('spon').css("color", "red");         settimeout(function(){             $('spon').css("color", "");         },3000);     }); }); 

when add both scripts, works "changecolor.js", alert "test" first script doesnt work :(

this head .html file:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script type='text/javascript' src="scripts/scrolltop.js"></script> <script type='text/javascript' src="scripts/changecolor.js"></script> 

my web browser console, not problem is.

this because you're replacing whole body ($('body').html(strnewstring);) in changecolor.js, , therefore events registered (click()) no longer bound dom element.