I change one div block to another with the following script

$(document).ready(function(){ var result = $("#main_text"); $(result).click(function(){ $(result).remove(); $( "body" ).append( "<div id='work'>Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</div>" ); }); });

Everything works fine, but then I want to change the work block created by the previous script with a click of the mouse to another one, I try to change it with the same code

 $(document).ready(function(){ var result = $("#work"); $(result).click(function(){ $(result).remove(); $( "body" ).append( "<div id='newwork'>Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст2</div>" ); }); });

but nothing works, tell me how to change the div blocks several times at the click of a mouse using javascript?

html:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Besha's site</title> <meta name="description" content="The HTML5 Herald"> <meta name="Besha" content="SitePoint"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/animate.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.textillate.js"></script> <script type="text/javascript" src="js/jquery.lettering.js"></script> <script type="text/javascript" src="js/script.js"></script> <link rel="shortcut icon" href="http://besha.rudev.org/favicon.ico" type="image/x-icon"> <link rel="icon" href="http://besha.rudev.org/favicon.ico" type="image/x-icon"> </head> <body> <div id="spider"> <img src="http://besha.rudev.org/img/spider.png"> </div> <div id="spidereye"> <img src="http://besha.rudev.org/img/spaidereye.png"> </div> <div id="main_text"> <h1 id="tlt"> <p data-out-effect="fadeOut" data-out-shuffle="true">Coming soon...</p> </h1> </div> </body> </html>

  • added html to question text - Besha

2 answers 2

Use $(document).on('click', '#work', function() {...});

 $(document).ready(function(){ //var result = $("#main_text"); $(document).on('click', '#main_text', function() { $("#main_text").remove(); $( "body" ).append( "<div id='work'>Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</div>" ); }); }); $(document).ready(function(){ //var result = $("#work"); $(document).on('click', '#work', function() { $("#work").remove(); $( "body" ).append( "<div id='newwork'>Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст2</div>" ); }); });

Example:

 $(document).ready(function() { //var result = $("#main_text"); $(document).on('click', '#main_text', function() { $("#main_text").remove(); $("body").append("<div id='work'>Π° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΅Ρ‰Π΅ Ρ€Π°Π· здСсь Π½Π°ΠΆΠΌΠΈ</div>"); }); //var result2 = $("#work"); $(document).on('click', '#work', function() { $("#work").remove(); $("body").append("<div id='main_text'>НаТми Π½Π° эту надпись</div>"); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main_text"> НаТми Π½Π° эту надпись... </div>

  • Thanks, it works) - Besha
 $(document).ready(function(){ var result = $("#work"); $(result).click(function(){ $(this).remove(); $( "body" ).append( "<div id='newwork'>Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст2</div>" ); $("#newwork").click(function(){ $(this).remove(); $( "body" ).append( "<div id='newestwork'>Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст 3</div>" ); $("#newestwork").click(function(){ $(this).remove(); $( "body" ).append( "<div id='themostnewestwork'>Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст 4</div>" ); $("#themostnewestwork").click(function(){ $(this).remove(); $( "body" ).append( "<div id='themostnewestworkEver'>Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст 5</div>" ); }); }); }); }); });

hey i haven't finished yet ...

Let's not fool around and use

$("#work").html("Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст2");

or

$("#work").text("Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст2");

Cannot div.click shoot after div removed.

  • Cannot div.click shoot after div is deleted - can. see event .on and .live (for old versions) - Alex
  • @Alex - brevity - a poor relative of talent. - Igor