jQuery Replace DIV - Not working with 1.11 - javascript

I am trying to load content from a hidden div container into an active container. This should be so simple. The code I have works fine with old jQuery, but is broken with the latest version. What am I missing here?
Here is my code in JSFiddle
http://jsfiddle.net/poaw07w4/
$('.campuslink').live('click', function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#faq_" + id).html();
$('#campusfaq').fadeOut(600,function(){
$('#campusfaq').html(contentTobeLoaded).fadeIn(500, function () {
});
});
e.preventDefault();

The live method was deprecated in version 1.7 and removed in version 1.9. You can use the on method to create a delegated event. (Don't forget the e parameter):
$(document).on('click', '.campuslink', function (e) {
Demo: http://jsfiddle.net/poaw07w4/3/
Note: Binding the event on the document element corresponds to how live worked. If possible you should use an element closer to the element where the event occurs, to reduce the overhead.

Try using .on('click') instead of .live('click')
https://jsfiddle.net/dotnetmensch/poaw07w4/1/
$('.campuslink').on('click', function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#faq_" + id).html();
$('#campusfaq').fadeOut(600, function () {
$('#campusfaq').html(contentTobeLoaded).fadeIn(500, function () {});
});
e.preventDefault();
});

The live() method has been deprecated since JQuery 1.7 (more here). If you replace it with the on() method, it should work fine (note also that preventDefault() is moved):
$('.campuslink').on('click', function (e) {
e.preventDefault();
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#faq_" + id).html();
$('#campusfaq').fadeOut(600,function(){
$('#campusfaq').html(contentTobeLoaded).fadeIn(500, function () {
});
});

Related

.on('scroll') stops firing after usage of replaceWith() method [duplicate]

When I replaceWith an element to bring one out of the DOM, then replaceWith it back in, events registered to it do not fire. I need to events to remain intact.
Here's my Javascript:
var replacement = $(document.createElement('span'));
var original = $(this).replaceWith(replacement);
replacement
.css('background-color', 'green')
.text('replacement for ' + $(this).text())
.click(function() {
replacement.replaceWith(original);
});
Live demo
In the demo, when you click an element, it is replaced with another element using replaceWith. When you click the new element, that is replaced with the original element using replaceWith. However, the click handler does not work any more (where I would think it should).
Because when you replace the original element, events bound to it are removed. You'll need to re-attach the click event handler on original after the call to replacement.replaceWith(original):
$(function()
{
function replace()
{
var replacement = $(document.createElement('span'));
var original = $(this).replaceWith(replacement);
replacement
.css('background-color', 'green')
.text('replacement for ' + $(this).text())
.click(function()
{
replacement.replaceWith(original);
original.click(replace);
});
}
$('.x').click(replace);
});
UPDATE: live() and bind() have been deprecated, in favour of on().
You can use live() and bind() events, this is your new code:
$(function() {
$('.x').live('click', function() {
var replacement = $(document.createElement('span'));
var original = $(this).replaceWith(replacement);
replacement
.css('background-color', 'green')
.text('replacement for ' + $(this).text())
.bind('click', function() {
replacement.replaceWith(original);
});
});
});
-Live event works with jQuery 1.3 and upper.
-if you want to stop the live propagation use die() function.
live events are what you are looking for

Cannot bind element in change event

I need to bind jQuery element in onchange event.
$(document).on('change', '#dropdownid', function(e) {
// your code
});
This is what I tried, but the code above is not executing.
$(document).on('change', '#$('.type').find('select').data('data-type')', function(e) {
// your code
});
var values = $('.type').find('select').data('data-type');
print id "dropdownid".
Any suggestions are welcome.
You are forming the selector in the wrong way. You can use a variable like the following way:
var values = $('.type').find('select').data('data-type');
$(document).on('change', '#'+values, function (e) {
OR: Only wrap # with quotes
$(document).on('change', '#' + $('.type').find('select').data('data-type'), function(e) {
You keep jquery function is in quotation which doesn't make it work
$(document).on('change',
'#'+ $('.type').find('select').data('data-type'),
function (e) {
//your code
});

Javascript Equivalent of Jquery

I am having problem in converting jquery to javascript as my application requirement is not to use jquery and only in plain html and javascript. I know how to write the code in Jquery but unable to convert it in javascript. My code is as follows
$(document).ready(function () {
$('input[type="button"').click(function () {
$(this).prop('disabled','disabled');
});
});
How to convert this code snippet to javascript.
Use window.onload to handle load-event on the window
document.querySelectorAll to select list of the elements within the document that match the specified group of selectors.
[].forEach.call to iterate through selected elements.
addEventListener to register the specified listener on the element.
window.onload = function() {
var elems = document.querySelectorAll('input[type="button"]');
[].forEach.call(elems, function(el) {
el.addEventListener('click', function() {
this.disabled = true;
});
});
};
Edit: document.addEventListener('DOMContentLoaded', function () {}); could be used instead of window.onload but consider Browser compatibility as well. Another easier alternate would be to place your <script> as last-child of <body> without wrapping your script in any load handler.
Use the DOMContentLoaded event as follow:
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
var btns = document.querySelectorAll("input[type=button]");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
//Do stuff
console.log("button" + i + "clicked");
});
}
});

cant hide data that was dynamically added

this is the function to hide the data
$(".dispatch_pedido").live('click', function(){
var res = this.id.split("_");
var id = res[1];
$("#"+id).hide();
});
this code only works on the data that was initially added but not the data added by ajax.
When you use ajax to add new element to the DOM, you need to use event delegation so the event can bind to that newly added element:
$(document).on('click', '.dispatch_pedido' , function(){
});
Also, live is deprecated as of jQuery version 1.7 , you should use on() instead.
You can use delegate() instead of on() in old version of jQuery:
$(document).delegate( ".dispatch_pedido", "click", function() {
// Your code here
});
It seems your syntax is not correct. Checkout the below code.
$(".dispatch_pedido").live('click', function(){
var res = $(this).attr("id").split("_");
var id = res[1];
$("#"+id).hide();
});

JQuery delegate method on a grid

I am trying to use the delegate method on a grid that I wrap with the DataTables.Net plug-in. I originally had this code which works as expected.
$("#myGrid tbody tr").click(function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
However, if I change the paging size then the newer rows don't have the click event calling the function. I decided the new JQuery delegate method should do exactly what I wanted; however, it does nothing at all on any tr element.
Could anyone explain why this does not work :
$('#myGrid tbody').delegate('tr', 'click', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
I have tried different combinations of the selector and none get it to work.
Try this instead:
$('#myGrid').delegate('tr', 'click', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
There's a good chance that some events on your tbody are getting messed with and/or your tbody's are getting manipulated. I doubt the entire table suffers from this problem as well.
Use this:
$("#myGrid tbody tr").live('click', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
.live() works for current of future elements.
Behind the scenes, bind, delegate and live all use the method on.
I've had a few problems with delegate, so I started using on instead.
Converting your delegate calls to on is easy: just swap the first and second arguments.
This:
$('#myGrid tbody').delegate('tr', 'click', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
Becomes this:
$('#myGrid tbody').on('click', 'tr', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
BTW: live is deprecated in newer version of jQuery
Try this
$('#myGrid tbody').delegate('click', 'tr', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
or
$('body').delegate('click', '#myGrid tbody tr', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
If the newer rows are being added dynamically, you have to use live method on the items, change the delegate to live

Categories