How .on works for $(document) - javascript

My JS Code does not work for a modal with a form that is loading from an ajax-call to php side.
I think I have to call the function like the following:
$(document).on('click', '#tags', function ()
How should I change the original code into this, can someone help and explain it to me?
$('#tags').on({ click: function(e) {
e.preventDefault();
alert('geklickt');},
mouseenter: function(e) {
alert('mouse enter!');
}
});
Using only the $('#tags') does not work.
Additionally, I have to change this code:
$(document).ready(function() {
bookIndex = 0;
$('#bookForm')
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove fields
$('#bookForm')
.formValidation('removeField', $row.find('[name="book[' + index + '].title"]'))
.formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]'))
.formValidation('removeField', $row.find('[name="book[' + index + '].price"]'));
// Remove element containing the fields
$row.remove();
});
});
Which parts do I have to change so the document.on support is available?

Just pass string selector:
$(document).on({
click: function(e) {
e.preventDefault();
alert('geklickt');
},
mouseenter: function(e) {
alert('mouse enter!');
}
}, '#tags');

Related

Why is event.stopPropagation not cancelling $('html').click?

I have an input field which has a focusout event on it. I also have a click event set on $('html') which transfers focus to a different input field. I wrote a click handler for my input field and put in event.stopPropagation(); but it doesn't seem to be working. What am I missing? What does $('html') refer to? My code:
p.replaceWith(
"<input class='memoryEditField' type='text' value=" + p.text() + ">"
);
var inputField = $(".memoryEditField");
inputField
.on("click", function(event) {
event.stopPropagation();
})
.on("focusout", editFieldLostFocus)
.on("keyup", editFieldKeyPressed);
The other input field:
$("html").on("touchstart", function() {
MQInput.focus();
});
$("html").on("click", function() {
MQInput.focus();
});
Please provide all of code (what is p in Your code? Also editFieldLostFocus, editFieldKeyPressed).
I think You're missing something in methods editFieldLostFocus, editFieldKeyPressed and it makes illusion that stopPropogation does no work
In fact it works as expected:
$(function() {
$('p').each(function() {
var p = $(this);
p.replaceWith(
'<input class="memoryEditField" type="text" value="' + p.text() + '">'
);
});
function editFieldLostFocus() {
console.log('call editFieldLostFocus');
}
function editFieldKeyPressed() {
console.log('call editFieldKeyPressed');
}
var inputFields = $(".memoryEditField");
inputFields
.on("click", function(event) {
event.stopPropagation();
console.log('memoryEditField clicked');
})
.on("focusout", editFieldLostFocus)
.on("keyup", editFieldKeyPressed);
$("html").on("touchstart", function() {
console.log('MQInput.focus');
//MQInput.focus();
});
$("html").on("click", function() {
console.log('MQInput.focus');
//MQInput.focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>FIELD 1</p><br/>
<p>FIELD 2</p><br/>

.on("hover", ...) chaining not working

I have a js file that has .on("click" , ..) chaining happening that I would like to also add a hover event to. My code is:
}).on('hover' , '.tooltip' , function (e) {
if (e.type == "mouseenter") {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
}else{
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
}
});
I understand that I can really only pass one function this way so I am checking for the event type to trigger the appropriate behavior. This doesn't seem to be working for me. Any ideas?
I think this is what you want
}).on('mouseenter' , '.tooltip' , function (e) {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
});
}).on('mouseleave' , '.tooltip' , function (e) {
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
});
You don't need if (e.type == "mouseenter") {
And hover is not a valid method to use with .on() - I am not sure about this though.. use mouseover or mouseenter
Use it as:
$('.tooltip-holder').on('mouseover' , '.tooltip' , function () {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
});
$('.tooltip-holder').on('mouseout' , '.tooltip' , function () {
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
});
Fiddle
You can bind several event handlers at once. In your case it will be:
.on('mouseenter mouseleave' , '.tooltip' , function (e) { ... });
As per jQuery source code, hover is not included in the event list that triggered leading to JQuery .on() because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave(). So, in short, you cannot use hover with .on() like below:
}).on('hover' , '.tooltip' , function (e) {...
So, your option is to use .mouseenter() and .mouseleave() like below:
.on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, '.tooltip');

Creating a clickable div within a div

for some reason I cannot make this simple thing to work:
for (var i = 0; i < results.length; i++) {
var object = results[i];
$("#recipes_names").append("<div id =" + "recipe" + i + " >");
$("#recipes_names").append(object.get('recipe_title'));
console.log(object);
console.log(object.id + ' - ' + object.get('recipe_title'));
$("#recipe1").click(function(e) {
e.stopPropagation();
alert("inside click");
});
}
},
I create divs within the "recpie_names" div with the name "recipe0"/"recipe1" etc and I can't for the life of me make them clickable.
I'm sure there's a tiniest of mistakes that I make here but I just can't nail it down.
Can you help me out?
Add a class to the div which is appended and instead of adding event on base of id add just one event on class selector and write just on event:
$("#recipes_names").append("<div class='recipe' id =" + "recipe" + i + " >");
and:
$(document).on("click",".recipe",function(e) {
e.stopPropagation();
alert("inside click");
});
You have to delegates your event
$('#recipes_names').on('click', 'div[id^=recipe]', function(e){
e.stopPropagation();
alert("inside click");
});
It looks like you are generating these divs after the fact. So .click will not work.
Try:
$("#recipe1").on('click', function(e) {
e.stopPropagation();
alert("inside click");
});

Jquery events for closing and opening select drop down , and not on change

i want a neat solution to handle event for a drop down menu , so that when user opens the select menu , it alerts opened , and when he closes it , it alerts closed , neglecting wheather the selected value is changed or not.
<select id="dummy">
<option>dummy1</option>
<option>dummy2</option>
<option>dummy3</option>
</select>
what i want is something like
$("#dummy").on('open',function(){//do something})
$("#dummy").on('close',function(){//do something})
something like heapbox
http://www.bartos.me/heapbox/
and this solution is not acceptable : Run change event for select even when same option is reselected
the typical approach to extending the native functionality of a select box is to replace it with styleable markup and then tie the values of the new markup back into the origninal (now hidden) select element. (NOTE: I've not included any styles. This is a bare-bones example of using a select replacement).
var SelectBox = {
init: function () {
if ($('select').length > 0) {
this.generateStyledSelectbox('custom-select');
};
},
generateStyledSelectbox: function (cssClass) {
// Contained within .each to isolate all instances of <select>
$('select').each(function(index) {
var $source = $(this),
selected = $source.find("option[selected]"),
options = $source.find('option'),
selindex = index;
// Append styleable pseudo-select element to doc
$source.after('<div id="result-' + index + '" class="' + cssClass + '"></div>');
// Construct select list in pseudo select element
$('#result-' + index).append('<dl id="activeValue-' + index + '" class="dropdown"></dl>');
$('#activeValue-' + index).append('<dt>' + selected.text() + '<span class="value">' + selected.val() + '</span></dt>');
$('#activeValue-' + index).append('<dd><ul></ul></dd>');
// Assign select values to pseudo-select lis items
options.each(function () {
$('#activeValue-'+ index + ' dd ul').append('<li class="select-menu-item">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></li>');
});
$('.dropdown').each(function(index) {
$(this).find('dd ul li a').on('click', function(event) {
event.preventDefault();
var text = $(this).not('.value').html(),
$base = $('.custom-selectbox').eq(index);
$('.dropdown').eq(index).find('dt a').html(text);
$('.dropdown').eq(index).find('dd ul').hide();
$base.val($(this).find('span.value').html());
});
});
// prevent link actions in dropdown
$('.dropdown dt a').on('click', function (event) {
event.preventDefault();
});
// open/close
$(".dropdown").eq(index).find('dt a').on('click', function () {
$(".dropdown").eq(index).find('dd ul').toggle();
});
$(".dropdown").eq(index).find('dd ul li a').on('click', function () {
var text = $(this).html(),
newval = $(this).find('.value').html();
$(".dropdown").eq(index).find('dt a span').html(text);
$('select').eq(index).val(newval);
$(".dropdown").eq(index).find('dd ul').hide();
});
// Hide dropdown on outside click
$(document).on('click', function (e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) {
$(".dropdown").eq(index).find('dd ul').hide();
}
// remove dropdown-open targetable class
if (!$clicked.parents().hasClass("dropdown-open")) {
$clicked.parents().removeClass('dropdown-open');
}
});
// Hide native select
$source.css('display', 'none');
// assign initial (default) value
var initialval = $source.find('option').eq(0).html();
$('#activeValue-'+index+' dt a').html(initialval);
}); // END .each
}
};
SelectBox.init();
Here's a fiddle http://jsfiddle.net/P6ZCn/ (again, without styles)

How to highlight first row of table JQuery on page load ?

My following code works fine if any row is clicked:
$(document).ready(function() {
$('#currentloc_table tr').click(function(event) {
$("#"+$(this).attr('id')+" input:checkbox")[0].checked = ! ($("#"+$(this).attr('id')+" input:checkbox")[0].checked);
if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == true)
$(this).addClass('selected');
else if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == false)
$(this).removeClass('selected');
});
});
Here is the CSS:
.selected td {
background: yellow;
}
What I need that on page load, first row of this table should get highlighted. How can i do that?
Try this
$(document).ready(function () {
$('#currentloc_table tr').click(function (event) {
$("#" + $(this).attr('id') + " input:checkbox")[0].checked = !($("#" + $(this).attr('id') + " input:checkbox")[0].checked);
if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == true)
$(this).addClass('selected');
else if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == false)
$(this).removeClass('selected');
});
// Add these lines
var firstTr = $('#currentloc_table tr:first');
firstTr.addClass('selected');
firstTr.find("input:checkbox")[0].checked = true;
});
working demo
You can try this use .first() or :first() to select the target:
$(document).ready(function() {
$('#currentloc_table tr').first().addClass('selected');
....
or:
$(document).ready(function() {
$('#currentloc_table tr:first').addClass('selected');
....
You can though take a look at these:
.eq() and :eq()
nth-child()
:first-child
read documentation
Trigger the function after load
$('#currentloc_table tr:first-child').trigger('click');
For this to work you should add this after binding click event with:
#currentloc_table tr
Seems like your code could be improved sligtly:
$('#currentloc_table tr').click(function (event) {
var check = $("input:checkbox", this)[0];
check.checked = !check.checked;
$(this)[check.checked ? 'addClass' : 'removeClass']('selected');
});
To select the first row:
$('#currentloc_table tr:first').click();
$(document).ready(function () { $('#currentloc_table').find('tr:first').addClass('selected');});
Try this ,
$(document).ready(function() {
$('#currentloc_table tr').first().addClass('selected_f');
// rest of your stuff ....
And css
.selected_f {
background: yellow;
}
Your CSS class taking as default for selected class, so its not adding that class , and not able to see the effect
Try with this
$(document).ready(function(){
$("#currentloc_table tr:first"):css('background','yellow');
})
or else try with
$("#currentloc_table tr").eq(0):css('background','yellow');

Categories

Resources