Trigger a click event with dynamically loaded content

Question

My content changes with ajax and I want that after 200px of scrolling to trigger a click to an element.

$(window).scroll(function() {
  if($(window).scrollTop() > 200){
    $(".element")[0].click();
  }
}

But this does not work with changing content. On first load it works. But as soon as ajax does it's stuff the event isn't firing anymore. Any ideas? I know about the on event but cannot figure it out how to use it here.

Update

The linked question does not help me:

$(staticAncestors).on(eventName, dynamicChild, function() {});

this works for clicks or other events. But I don't want to attach a click event, I want to trigger a click event. How could I do it? The change is in an ajax call beyond my control so I cannot add a callback.

Thanks

Answer 1

When you're trying to play with item/object's that aren't there on the very first load JavaScript gets a bit confusing.

jQuery/JS language in simple terms only really can apply to the objects on page load.

The easiest way around this is to delegte functions to a HTML element that is always there on pageload. Most people usually use the <body> .

Eg:

$(window).scroll(function() {
  if($(window).scrollTop() > 200){
    $( "body" ).delegate( $(".element")[0], "click", function() {
      // Your Code Here
    });
  }
}

Answer 2

根据此答案，您可以使用find()方法查看静态祖先元素的后代元素：

$('#someStaticAncestorElement').find('.element')[0].click();

Trigger a click event with dynamically loaded content

Question

2 answers

solution1
0 2015-12-09 15:12:58

solution2
0 ACCPTED 2015-12-09 15:31:28

Trigger a click event with dynamically loaded content

Question

2 answers

solution1 0 2015-12-09 15:12:58

solution2 0 ACCPTED 2015-12-09 15:31:28

solution1
0 2015-12-09 15:12:58

solution2
0 ACCPTED 2015-12-09 15:31:28