Disable Dynamically created
element on click - jquery

Question

I have this script: (Dynamically creating <li> elements)

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";

I want to disable the <li> elements when click on the <li> until the function does its job. this is the click event i have:

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

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

I used attr("disabled", "disabled") but it didn't worked. What should i do to disable all the <li> elements until the link loads. Any help would be appreciated.

`disabled` attribute is applicable to form elements only. `li` is not a form element. — hindmost, Oct 11 '14 at 11:31
Just noticed that you're using jquery live(). Depending on the jquery version you're using, this may not work as live() is deprecated as of jquery 1.7 and you should adjust to using jquery on(). For reference: http://api.jquery.com/live/ and http://api.jquery.com/on/ — matthias_h, Oct 11 '14 at 11:34
@user3266957 resolve what? disable `li` elements? you can't do so — hindmost, Oct 11 '14 at 11:34
@hindmost hmm means there's no way to disable 'li' elements.thanks — user3266957, Oct 11 '14 at 11:39
@user3266957 First you have to clarify what you exactly mean by _disabling 'li' elements_ — hindmost, Oct 11 '14 at 11:42
@hindmost i don't want the user to click on the pagination li's more than once. after click function perform its operation then user can click the li's again one time. and so on. — user3266957, Oct 11 '14 at 11:45
As it's not totally clear and you maybe not posted all relevant code - is it possible that you just want to disable the a hrefs in the li as maybe no additional click-event is set to the li? Then you could just switch to on() instead of live() and add e.preventDefault() to disable the links. — matthias_h, Oct 11 '14 at 11:48
i have posted my all code. I am performing pagination. i want to restrict user to click only on one page number(.pagination>ul>li>a) at a time. Its clear or not? I changed to .on() but that didn't helped me. When i click on the page number its taking me to that page number instead of performing ajax call. — user3266957, Oct 11 '14 at 11:55

score 1 · Accepted Answer · answered Oct 11 '14 at 12:03

By default attribute disabled is not applicable for li elements.

Instead we need to do a hack for this. i.e., applying overlay on the list element. So that user cannot select any elements on the li element.

You can see the demon by navigating to below code...

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/

Disable Dynamically created element on click - jquery

1 Answers1

Disable Dynamically created
element on click - jquery