0

Я изменяю один div блок на другой с помощью следующего скрипта

$(document).ready(function(){
    var result = $("#main_text");
    $(result).click(function(){
    $(result).remove();
    $( "body" ).append( "<div id='work'>некоторый текст</div>" );
    });
});

все нормально срабатывает, но потом я хочу поменять по щелчку мыши созданный предыдущим скриптом блок work, на другой, пытаюсь поменять его аналогичным кодом

$(document).ready(function(){
    var result = $("#work");
    $(result).click(function(){
    $(result).remove();
    $( "body" ).append( "<div id='newwork'>некоторый текст2</div>" );
    });
});

но ничего не получается, подскажите как поменять блоки div несколько раз по щелчку мыши с помощью 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>

1
  • добавил html в текст вопроса
    – Besha
    16 окт 2015 в 20:19

2 ответа 2

4

Используйте $(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>" );
    });
});

Пример:

$(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>

1
  • Спасибо, это работает )
    – Besha
    17 окт 2015 в 10:39
1
$(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>" );
          });
        });
      });
    });
});

погодите, я еще не закончил...

Давайте не валять дурака и использовать

$("#work").html("некоторый текст2");

или

$("#work").text("некоторый текст2");

Не может div.click выстреливать после того как div удален.

2
  • Не может div.click выстреливать после того как div удален - может. смотрите событие .on и .live(для старых версий)
    – Alex
    16 окт 2015 в 21:04
  • @Alex - краткость - бедная родственница таланта.
    – user176262
    16 окт 2015 в 21:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.