点击时禁用动态创建的 <li> 元素 - jquery答案

【问题标题】：Disable Dynamically created <li> element on click - jquery点击时禁用动态创建的 <li> 元素 - jquery
【发布时间】：2014-10-11 11:26:54
【问题描述】：

我有这个脚本：（动态创建<li> 元素）

echo '<div class="pagination"><ul>' . "\n";

// Previous Post Link.
if ( get_previous_posts_link() )
{
    printf( '<li>%s</li>' . "\n", get_previous_posts_link('Prev') );
}

// Link to first page, plus ellipses if necessary.
if ( ! in_array( 1, $links ) )
{
    $class = 1 == $paged ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
    if ( ! in_array( 2, $links ) )
    {
        echo '<br><br>';
    }
}

// Link to current page, plus 2 pages in either direction if necessary.
sort( $links );
foreach ( (array) $links as $link )
{
    $class = $paged == $link ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}

// Link to last page, plus ellipses if necessary.
if ( ! in_array( $max, $links ) )
{
    if ( ! in_array( $max - 1, $links ) )
    {
        echo '<br><br>' . "\n";
    }
    $class = $paged == $max ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}

// Next Post Link.
if ( get_next_posts_link() )
{
    printf( '<li>%s</li>' . "\n", get_next_posts_link('Next') );
}

echo '</ul></div>' . "\n";

我想在单击<li> 时禁用<li> 元素，直到函数完成其工作。这是我的点击事件：

jQuery('.pagination > ul > li > a').live('click', function(e)
{
   // disable <li> elements.

    jQuery('.postMain').load(link + ' .postMain', function()
    {
        // enable <li> elements.
     });
});

我使用了attr("disabled", "disabled")，但没有成功。在链接加载之前，我应该怎么做才能禁用所有 <li> 元素。任何帮助将不胜感激。

【问题讨论】：

disabled 属性仅适用于表单元素。 li 不是表单元素。
哦，我明白了。还有其他解决方案吗？
刚刚注意到您正在使用 jquery live()。根据您使用的 jquery 版本，这可能不起作用，因为从 jquery 1.7 开始不推荐使用 live()，您应该调整以使用 jquery on()。供参考：api.jquery.com/live 和 api.jquery.com/on
@user3266957 解决什么问题？禁用li 元素？你不能这样做
@matthias_h 是的，我使用的是 jquery 1.11。

标签： javascript jquery html

【解决方案1】：

默认属性 disabled 不适用于 li 元素。

相反，我们需要为此做一个 hack。即，在列表元素上应用覆盖。这样用户就不能选择 li 元素上的任何元素。

您可以通过导航到以下代码来查看恶魔...

HTML

<ul>
   <li>
     <a href="google.com">Google</a>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ipsum quam, nec blandit sapien eleifend eget. Cras cursus ullamcorper risus nec rutrum. Praesent lobortis nibh turpis. Curabitur eleifend leo ultricies efficitur dignissim. Aliquam eget dapibus nisi. Fusce dictum laoreet enim, nec blandit arcu feugiat sagittis. Mauris non dolor nec dui luctus ornare. Vestibulum pulvinar metus diam, eu vulputate leo suscipit ut. Donec eget consequat sem, et finibus lorem.</p>    
  </li>
</ul>
<input type="button" id="btnReset" value="Reset" />

CSS

.overlay {
  opacity: 0;
  position: absolute;
}

li {
  list-style: none;
  background: blue;
  padding: 10px;
  color: #fff;
}

a {
  color: #fff;
}

jQuery

$('li').click(function(){
    var list_height = $(this).height();
    var list_width = $(this).width();
    var list_position = $(this).position();
    $('body').append('<div class="overlay"></div>');
    $(".overlay").css({'height': list_height,'width': list_width,'left': list_position.left, 'top': list_position.top});
});

$("#btnReset").click(function(){
    $('.overlay').remove();
});

http://jsfiddle.net/4x76amag/2/

【讨论】：