javascript - 如何操作我刚用 jQuery 添加的元素？

Question

我有一个屏幕，当用户单击一个按钮时，使用 jQuery 的 .load() 加载一个新模板，以提供更多选项和过渡。这是动态发生的，它意味着向页面添加新的 HTML，当脚本恰好被加载时，它不存在:

(function($) {
  $('.go').on("click", function() {

    /* Poor man's reactivity. */
    var shouldReact = false;

    try {
      $('.top-part').animate({
        opacity: 0,
      }, {
        step: function() {
          $(this).css('transform', 'translate3d(0,-20px,0)');
        },
        duration: 'slow'
      }, 'swing');

      $('.go').animate({
        opacity: 1,
      }, {
        step: function() {
          $(this).css({
            'height': '100%',
            'width': '100%',
            'margin-top': '0',
            'z-index': '0',
            'background-color': '#0cff9b'
          });
        },
        duration: 1500
      }, 'swing');

      $('.go-text').animate({
        opacity: 0,
      }, {
        step: function() {
          $(this).css('transition', 'all 1s ease-out');
        }
      });
      shouldReact = true;
    } catch (err) {
      console.log(err.message);
      shouldReact = false;
    }
    if (shouldReact == true) {
      $(this).css({
        'cursor': 'initial'
      });
      $(this).unbind("click");
      $(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
        function(event) {
          $('.welcome_screen').css({
            'background-color': '#0cff9b'
          });
          $('.bottom-part').remove();
          render_screen__first_basic_settings();
        });
    } else {
      console.log("Stop! No need to react.");
    }
  });

  function genesis(screen_name, screen_selector, screen_contents, the_old) {
    let handler = '.welcome_screen';
    $(handler).prepend(screen_name);
    $(screen_selector).load(ABSPATH + screen_contents);
    $(the_old).remove();
  }

  /* Parts */
  function render_screen__first_basic_settings() {
    /*
    Each render of a screen must have a genesis, the template which it builds from and a
    cleanse / kill. We remove the old, to make space for the new.
    */

    genesis('<div id="screen-1" style="z-index:2;"></div>',
      '#screen-1',
      '/js/setup_theme_templates/basic_settings.html',
      '.top-part');

    // This is where I should be able to access the template, but I can't.
  }
})(jQuery);

/* Welcome Screen & Setup Experience */

.welcome_screen {
  display: flex;
  background-color: white;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

@keyframes fadeInFromBottom {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInFromTop {
  0% {
    opacity: 0;
    transform: translate3d(0, -15px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes marginAdd {
  from {
    margin-bottom: 0;
  }
  to {
    margin-bottom: 48px;
  }
}

.welcome_screen .top-part {
  will-change: margin;
  display: flex;
  z-index: 2;
  transition: margin 0.5s ease, transform 0.35s ease;
  animation: 0.8s ease 0s marginAdd;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.welcome_screen .bottom-part {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  position: absolute;
}

.welcome_screen .welcome-text {
  display: inline-flex;
  opacity: 0;
  font-size: 72px;
  animation: 1s ease 0s 1 fadeInFromTop;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

.welcome_screen .more-text {
  display: inline-flex;
  opacity: 0;
  font-size: 72px;
  animation: 1s ease 0s 1 fadeInFromBottom;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.welcome_screen .bottom-part {
  opacity: 0;
  animation: 1s ease 0s 1 fadeInFromBottom;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.welcome_screen .go {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 600px;
  width: 480px;
  background-color: #fdff60;
  text-transform: uppercase;
  font-family: Helvetica;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 220px;
  transition: all 0.5s ease;
}

.welcome_screen .go .go-text {
  position: absolute;
}

.welcome_screen .go:hover {
  cursor: pointer;
  width: 420px;
  height: 620px;
}

.welcome_screen .close {
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

#screen .basic_title {
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome_screen">
  <div class="top-part">
    <p class="welcome-text">Welcome!</p>
    <p class="more-text"> Shall we set this up?</p>
  </div>
  <div class="bottom-part">
    <div data-tilt data-tilt-speed="150" data-tilt-reset="false" data-tilt-max="10" data-tilt-perspective="250" class="go">
      <p class="go-text">Let's Do It!</p>
    </div>
  </div>
</div>

我正在加载的模板是:

<div id="basic-settings-template">
    <style type="text/css">
    @keyframes fadeInFromBottom {
        0% {
            opacity: 0;
            transform: translate3d(0,10px,0);
        }
        100% {
            opacity: 1;
            transform: translate3d(0,0,0);
        }
    }

    #basic-settings-template {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        animation: 1s ease 0s 1 fadeInFromBottom;
    }

    .title-box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .title-box .small-title {
        font-family: Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        opacity: 0.2;
    }

    .title-box .big-cta {
        font-size: 60px;
        color: #1f1f1f;
        margin-bottom: 48px;
    }

    .blog-name input {
        font-size: 14px;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-family: Helvetica;
        font-weight: 700;
        width: 480px;
        height: 48px;
        padding: 24px;
        border-radius: 3px;
        color: rgba(0,0,0,0.5);
        border: none;
        transition: all 0.25s ease;
    }
    .blog-name input:focus {
        outline: none;
        -webkit-box-shadow: 0px 0px 136px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 0px 136px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 136px 0px rgba(0,0,0,0.2);
    }
    </style>
    <div class="title-box">
        <p class="small-title">The Beginnings</p>
        <h3 class="big-cta">What should we call your blog?</h3>
    </div>
    <form id="myForm" action="#" method="post">
        <div class="blog-name">
            <input type="text" name="name" id="name" value="" placeholder="Enter the name..." tabindex="1">
        </div>
    </form>
</div>

不幸的是，尝试查询 $('#basic-settings-template') 没有返回任何结果，我相信这是因为脚本在错误的时间运行，但它不会解释为什么它会让我添加模板本身，如果 DOM 已经完成打包。

我怎样才能让它工作并能够使用新添加的 HTML？

Answer 1

jQuery.load接受一个函数作为参数，该函数将在请求完成后运行。

这意味着你可以这样做:

$(screen_selector).load(ABSPATH + screen_contents, function(){
    // #basic-settings-template was added to the DOM, you can manipulate it now.
    $('#basic-settings-template').....
});