Question

我试图克隆dom元素并更改其标签。但在我替换主元素后，我无法更改其子元素，也无法应用某些点击事件。

我注释了它停止工作之后的行。谢谢你的帮助！

http://codepen.io/sanns/pen/eJvzBN?editors=101

var selectDom = $('select');
selectDom.each(function() {
  var clone = $(this).clone().insertAfter(this);

  //take classes from clone
  var classesStr = clone.attr('class');

  clone = clone.replaceWith(function(index, oldHTML) {
    return $('<div class="custom-select ' + classesStr + '">').html(oldHTML);
  });

//why does not work?
  clone.find('option').replaceWith(function(index, oldHTML) {
    return $('<li>').html(oldHTML);
  });

  clone.wrapInner('<ul class="scrollbox"></ul>').prepend('<span class="shower"> Выберитеtttttttttteeeee тратататататат</span>');



  //BEHAVIOR SELECT
  clone.on('click', function() {
    alert('asdf');
  });

});

Answer 1

实际上.replaceWith()会返回原始的jQuery object，而不是替换内容。

您可以找到更多详细信息：http://api.jquery.com/replacewith/

以下是它的一个小例子：

＆＃13;

$( "button" ).click(function() {
  $( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});

＆＃13;

button {
    display: block;
    margin: 3px;
    color: red;
    width: 200px;
  }
  div {
    color: red;
    border: 2px solid blue;
    width: 200px;
    margin: 3px;
    text-align: center;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>First</button>
<button>Second</button>
<button>Third</button>

＆＃13;

为什么replaceWith取消对其变量的调用？

1 个答案: