Question

我有一系列的fieldset元素，当它们中的所有列表项都不可见时会被隐藏。问题是我希望在它们向上滑动后实际删除字段集并隐藏但我无法使其工作。

$(document).ready(function () {
    $('body').on("click", ".readBtn", function (e) {
	    var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

	    $('#chapter_'+chapterid).slideUp(function () {
          if (!$(this).is(":visible") 
             && !$(this).siblings("li").is(":visible")) {
            // Hide `fieldset`
            var parent = $(this).closest("fieldset");
            parent.slideUp();
            parent.remove();
          }
        });
	});
});

button.readBtn {
    margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 1
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_9">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_9">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 2
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_10">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_10">
                Mark as Read
            </button>
        </li>
        <li class="chapter" id="chapter_12">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_12">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>

我已经读过你不能使用jqueyr.click调用来删除页面加载后创建的元素，这就是我使用on调用的原因。但是我无法让它发挥作用。

Answer 1

尝试

$(document).ready(function () {
    $('.readBtn').click(function () {
        var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

        $('#chapter_'+chapterID).slideUp(function() {
          if (!$(this).is(":visible") 
             && !$(this).siblings("li").is(":visible")) {
            // hide `fieldset`
            // remove `fieldset` if all `li` siblings _not_ visible ,
            // at `.hide()` `complete` callback
            $(this).closest("fieldset").hide(function() {
              $(this).remove()
            })
          }
        });

    });
});

$(document).ready(function () {
$('.readBtn').click(function () {
    var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

    $('#chapter_'+chapterID).slideUp(function() {
      if (!$(this).is(":visible") 
         && !$(this).siblings("li").is(":visible")) {
        // hide `fieldset`
        $(this).closest("fieldset").hide(function() {
          $(this).remove()
        })
      }
    });

});
})

button.readBtn {
    margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 1
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_9">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_9">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 2
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_10">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_10">
                Mark as Read
            </button>
        </li>
        <li class="chapter" id="chapter_12">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_12">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>

Answer 2

这就是我要做的事情：

$(document).ready(function () {
    $('body').on("click", ".readBtn", function (e) {
        liEl = $(e.currentTarget).parent();
        var chapterID = $(e.currentTarget).attr('id').split('_').pop();

        $('#chapter_'+chapterID).slideUp(function () {
          if (!liEl.is(":visible") 
             && !liEl.siblings(":visible").length > 0) {
            // Hide `fieldset`
            var parent = liEl.closest("fieldset");
            parent.slideUp();
            parent.remove();
          }
        });
    });
});

http://jsfiddle.net/jplato/zp91wzc0/1/

删除加载dom后创建的动态元素

2 个答案: