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/>
Related
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');
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');
I want to fix the following issue in Firefox
When i try to select the text inside the textbox using double click on mouse its not selecting the text the cursor goes to the start of the text.Any ideas how to fix this?but this works fine in googlechrome
i tried the following from this http://www.iwebux.com/demos/ajax/ i this link when you try to edit the price column you cant select the value.Thank you.
my code:
$(document).ready(function () {
$('td.edit').click(function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
$(this).addClass('ajax');
$(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');
$('#editbox ').focus();
});
$('td.edit').keydown(function (event) {
arr = $(this).attr('class').split(" ");
if (event.which == 13) {
$.ajax({
type: "POST",
url: "supplierprice/config.php",
data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
success: function (data) {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
}
});
}
});
$('#editbox').live('blur', function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
});
Please use this code
$('td.edit').click(function(e){
var $target = $(e.target);
if($target.is('#editbox')){
return;
}
}
You might want to use select() instead of focus().
I have modified your script a bit.
http://jsfiddle.net/dKn4W/
The problem is that the click event bubbles up from the #editbox input, so the $('#editbox ').focus(); is executed on every click, that prevent text selection.
Modify your code something like this
$('td.edit').click(function(e){
var $target = $(e.target);
if($target.is('#editbox')){
return;
}
///// rest of code
}
Try using .select() function. This is used to select the text in the editable input elements.
In your case, try adding the line
$('#editbox').select();
below the line
$('#editbox ').focus();
Hope this hepls.
You need to stop the click events from propagating from #editbox to your td.edit. Try adding this:
$("td.edit").on("click", "#editbox", function(e) { e.stopPropagation(); });
In the following code i want to know how to detect when text is inserted dynamically in input field
<input id="test"><br />
Click me
$("#test").on("input", function() {
alert("Change to " + this.value);
});
$("a").on("click", function() {
$("#test").val("In clicks we trust.");
});
line to the code
Listen for a change event, also, you'll have to trigger this after programatically adding text:
$("#test").on("change", function() {
alert("Change to " + this.value);
});
$("a").on("click", function() {
$("#test").val("In clicks we trust.").change();
});
Demo: http://jsfiddle.net/fSUd8/1/
jQuery change() event handler
$('#test').on('change', function() {
...
});
I wonder why the below code works fine in IE but not Firefox (3.6.15)?
HTML:
<input type="image" name="btbuy1" id="btbuy1" src="img/buy.gif" disabled="disabled"/>
JavaScript:
EnableBuyButton(btbuy1);
function EnableBuyButton(ABtnId)
{
var btElement = document.getElementById(ABtnId);
btElement.setAttribute("disabled", "");
$('#' + ABtnId).bind('click', function ()
{
alert('User clicked buy btn');
});
}
Have a look, I've also done a little tidying up http://jsfiddle.net/bkKNU/
<input type="image" name="btbuy1" id="btbuy1" src="img/buy.gif" disabled="disabled"/>
EnableBuyButton("btbuy1");
function EnableBuyButton(ABtnId)
{
$('#' + ABtnId).attr("disabled","").bind('click', function ()
{
alert('User clicked buy btn');
});
}
You want to use an id but you are actually using the Html element that is identified by the id,
try
EnableBuyButton('btbuy1');
in stead of
EnableBuyButton(btbuy1);
You can also call the Jquery selector with the element itself
$(btElement)
Try this:
$(function() {
var EnableBuyButton = function(ABtnId)
{
var btElement = $('#' + ABtnId);
btElement.attr("disabled", "");
btElement.bind('click', function ()
{
alert('User clicked buy btn');
});
}
EnableBuyButton('btbuy1');
});
Hope it helps
jsfiddle: http://jsfiddle.net/aPvgm/1/
function EnableButton(id)
{
$('#' + id)
.removeAttr("disabled")
.click(function ()
{
alert('User clicked buy btn');
});
}