Develop Reference

How to prevent the particular child from event binding using Jquery?

I am binding the scroll events to all my html elements. To get the all the elements i am using the below filter
var element = $(myelemt).parentsUntil("html").add($(window));
return element
here element will return the body, window and all parents htmls tags.
For this html elements i am binding the events like below code:
element.on("scroll", function (e) {
$("#mywrapper3").html($("#mywrapper3").html() + "scrolling<br>");
}
Here i want to prevent particular child div element only from binding. How i can achive this?.
For example in my page for one div element(element with mywrapper id in sample) i dont want to bind this scroll event.
Also, I have to filter the element like in first code only. So how to achieve this instead of using stop propagation. Is there any way to do this.
I have prepared the one jsfiddle.Please get the link below
https://jsfiddle.net/khkcjb6o/
Thanks for any help

The .off() method is what you need. Originally I had started answering with an iframe solution and came up with the better solution later.
Since an iframe's context is different than it's parent, it is not included if you register everything on the parent page.
In the PLUNKER, the first section has an iframe with srcdoc and content within. Scroll the iframe and you'll notice that it isn't triggering the scroll counter.
Same thing with the second section that has a normal iframe.
The third and fourth section have scrolling content.
As expected, both trigger the scroll event.
Click the IV OFF button which uses the .off() method.
Now scroll section IV and notice the scroll counter isn't increasing.
.off() is what you need. Make sure to use this expression:
$('*').on('scroll', function() {....
That * will register everything but iframe content on a page so you don't have to write all of that code you had in your question.

You could jus use the :not() CSS selector
var element = $(myelemt + ':not(#mywrapper3)').parentsUntil("html").add($(window));
element.on("scroll", function (e) {
$("#mywrapper3").html($("#mywrapper3").html() + "scrolling<br>");
}

Javascript events (click)

My website works basically with javascript. the server returns the html in a JSON array then javascript will add it to DOM.
My problem is with events.
Should I add the click event to body/window and then check if target match or add event to every element ? (the most events will be in the feed, where elements have same class):
<div id="feed_1">
<div class="like_button" data-click="something here">Like</div>
</div>
<div id="feed_2">
<div class="like_button" data-click="something here">Like</div>
</div>
note: I'm not using jQuery

If you are asking whether or not you should add an even to every element in the HTML document, or to have one event listener that specifies a target upon a click, the better way is definitely the latter.
With events that work with a large number of elements, we enforce DRY principles through the use of event delegation. This involves declaring an event listener with the event parameter, and then triggering the event onto the event target. example:
var el = document.getElementByID('container');
el.addEventListener('click', function(e) {
doSomething(e.target); // do something to the target element
});
The idea here is that your container element encompasses everything you wish to be 'clickable', however, when you click an element within the container, the event will only fire for that clicked element. This way we prevent having to define an event listener for each individual element.
Hope this helps.

How to make checkboxes go to a url?

I am using jquery currently and I bind an event handler to checkboxes to bring users to a new page. The problem is that this does not scale well as binding 1500 checkboxes can cause ie8 on slower machines to think the script is not responsive when taking 2-3 seconds to bind these event handlers.
The only other solution I could think of was to use images instead of checkboxes so that they could be surrounded by an tag instead of having 1500+ event handlers bound. I do not prefer this solution as in general I dont think it's good practice to override the browser's default behavior/style.
Does anyone know a scalable way to bring users to a url when a checkbox is clicked?

The new jQuery recommandation is to put handlers on a common parent, like document, using .on:
$(document).on("click", ":checkbox", function () {
// your handler code
});
The handler isn't attached to your 1500 checkbox but the event naturally bubble to the document that check if the event target match your selector.

You could just use the 'onchange' method to check if it's 'checked' and then change the 'document.location.href' to the link you want.
<input type="checkbox" onchange="if(this.checked) document.location.href='http://www.google.com';"/>Go to google

$(document).ready(function() {
$(document).on('click', 'checkbox', function() { // <-- assuming your checkboxes are loaded asynchronously
window.location= "http://www.example.com";
});
});

Fire event on scrolling an open bootstrap modal

I am using "Bootstrap" modal (actually a branch of it that disables background scrolling when the modal is shown and adds more features - "bootstrap-modalmanager").
I need to do something when the modal is being scrolled. The problem is I can't find what is actually being scrolled.
When I use Chrome dev tools I can see in the time-line the event "scroll" is bring fired but I can't find where to see the div it scrolls, which I need to know so that I can do:
this:
$(window).on('scroll',"THE ID I AM LOOKING FOR",function(){..})
or this:
$("THE ID I AM LOOKING FOR").on('scroll',function(){..})

You can look for the target element in the event object. This will tell you where the event was fired.
$(document).on('scroll', function(e) {
e.target; //e.target will be the DOM element where the scroll event was fired
});
You can pass a different jQuery selector to the 'on' event according to your requirements.

Jquery global events and dynamically added content

I'm trying to trigger my own custom events as global events, so that anything on my page can listen to them and react, however, for dynamically added content it's not working. See my fiddle at: http://jsfiddle.net/6TMkG/8/
As far as I understand, the event is triggered for any element in the page that jQuery knows has a handler for it, and it seems it doesn't trigger the event for the li's even though they do have a handler.
Anyone know how to get around this behaviour?

try this
$("#b2").click(function() {
//$.event.trigger("randomEvent");
$('li').trigger('randomEvent');
});

If you want global event, then you could bind the event handler on document, and trigger it on any element in the document.
$(document).on('randomEvent', callback);
$('ul').click(function() {
$(this).trigger("randomEvent");
});

Sorry I completely missed that.. I did not see the first part of your question.. Custom events.. Looks like you are associating the randomEvent but you are not triggering that event when that is associated with it..
Make sure you add the trigger Event in the Document.Ready function so that the evnet handler is associated with as and when the element is available.