Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I'm stuck with the DOM. When the search button is pressed, JS script will inject element1, and there is a new function (A) that appears after injecting element1.
I changed the class name on element1 to element2. When I want to run function(A) a bug occurs, which function(A) still indexes element1, not element2. How can I fix it?
$('.search').click(function() {
$('button').after('<div class="a b">New div element here!</div>')
// in actual this code will run by click button and this code working
$(this).siblings().last().toggleClass("b")
// this code is not triggered, it should be triggered
$('.a:not(.b)').click(function() {
console.log('clickety click');
})
})
.b {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="search">search</button>
When you bind the events, they stay bound until they are unbound from the element. So if you want to "clean" your event bindings, you can use jQuery unbind() before binding new events:
$('your.selector').unbind().click(...
Another workaround is performing a class check inside the click function callback, to be sure if the element still has (or still hasn't) some class. Just be sure if you need or not to call some kind of preventDefault() to get a better control because button element does have a default behavior.
$('.a').click(function () {
if ( ! $(this).hasClass('b') ){
// Do things with .a elements that don't have .b class
}
})
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 4 months ago.
Improve this question
I am trying to detect when a <select> element that was dynamically added has had its option changed. However, it does not trigger when I change it.
The code:
var diP = document.createElement("select");
diP.add(option);
diP.add(option2);
diP.addEventListener("change", alert("Test"));
div2.appendChild(diP);
The code does not alert anything when I change the option.
You need to pass callback as argument to event listener, among with event type.
diP.addEventListener("change", () => alert("Test"));
Also, please check if you've selected HTML element div2 correctly.
HTML:
<div class="div2"> ... </div>
JS:
const div2 = document.querySelector('.div2')
For addEventListener's, you need to pass the name of the function, not call the function. Or you can pass it an anonymous function.
function funcName(){
}
diP.addEventListener("change", funcName);
or
diP.addEventListener("change", function(){
console.log(this.value)
});
I assume that instead you see one alert when your script executes for the first time because instead of passing a function to the addEventListener you call it.
In order to have alert shown when input changes, you need to pass a function which runs in response to the change event. So your code should look like this:
....
diP.addEventListener("change", () => alert("Test"));
...
This way you say "run a function which will make an alert each time input changes".
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I've been working on a project and I have everything functional on the page, minus one little set back. When I open the edit profile form there is 28 blank spaces before the name and title, while there is also 24 spaces after. If I delete all the text and spaces then my placeholder text will appear in the correct spot. My add element popup works with no issues. I have been combing over my code to see if I have any extra spaces that could be doing this and I still can't find anything. Any help would be appreciated.
https://gbolton1989.github.io/web_project_4/
The issue is in your javascript file index.js
editButton.addEventListener("click", () => {
if (!editProfileModalWindow.classList.contains("popup_is")) {
nameInput.value = profileName.textContent;
aboutInput.value = profileSubname.textContent;
}
toggleModalWindow(editProfileModalWindow);
})
The textContent property gets the content of all elements, not just the text (see more here). Because your element has a <h1> element child, you are getting the extra space.
To fix this, you can either:
Use the innerText property instead of textContent which only gets the human readable text
Make the profileName variable refer to the h1 element rather than it's parent. Then textContent will work properly
Examples:
editButton.addEventListener("click", () => {
if (!editProfileModalWindow.classList.contains("popup_is")) {
nameInput.value = profileName.innerText;
// or
// nameInput.value = profileName.children[0].textContent
aboutInput.value = profileSubname.innerText;
}
toggleModalWindow(editProfileModalWindow);
})
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
1) The code(Change Event) that is not working is:
$(document).on('change','select[name="id"]',function(){
alert('Not Working');
});
2) The code(Change Event) that is working is:
$(document).on('change',$('select[name="id"]'),function(){
alert('Working');
// Here $(this).val() not working for get value.I want to use $('select[name="id"]').val()
});
Doubts:
a) Why Is First change event not working?
b) Second change Event is Working, But $(this).val() is not working.
Can you please explain the difference between above 2 functions?
In order to handle select element change:
$('select[name="id"]').on('change',function(){
alert($(this).val());
});
For dynamically created elements use:
$(document).on('change','select[name="id"]',function(e){
alert($(e.target).val());
});
As you see, in that case e.target.val() should be used ( e.target wrapped into $() in order to get it as a jquery object )
I'm not sure why your first example doesn't work as I think it should, however the second example will have this scoped to document instead of the select.
The following will scope this to the select.
$('select[name="id"]').on('change', function (){
$(this).val()
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For some strange reason this simple click function I've added, which should be adding the 'big' class to the clicked divs, is only working for every other div.
See an example here (click the square boxes with images)
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Here is a fiddle but I chose not to post this as it works fine as it should do. The error is caused by some other element but I don't know what
http://jsfiddle.net/Ly1bxswq/1/
You binding your click handler within a loop, but need to do it only once when all elements added to page.
$.each(data.feed.entry, function (i, entry) {
// ...
$container.append(item);
// ...
})
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
}
As pointed out by #Yan Brunet's comment, it would be much better to delegate the event from every .box to their parent. That way you can bind your handler at any point (even before .box elements are added to page)
$container.on("click", ".box", function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I've this function in my script :
$("#image4").click(function(){
if($(this).attr("src")=="http://XXX.jpg"){
$(this).attr("src","http://YYYY.jpg");
}else{
$(this).attr("src","http://XXX.jpg");
}
return false;});
HTML
<img src="http://XXX.jpg" id="image4"/>
I don't understand why when I click on my image, the if part doesn't works. I explain : If I use this code, nothing change. If I add and alert un my click function, I see the alert twice and see the image change twice to.
It seems, "if" doesn't works and apply "if" and "else" at each time
Someone can help me about that. I think it a basic feature, I don't understand why it doesn't works.
Thanks
("#image4").click(function(){
^^
you missed a bracket!
Working: http://jsfiddle.net/MAVyb/
The sysntax and everything on your code is right so it is definetly value problem. Problem may be src have leading or trailing space in it.
try alert like
alert("-"+$(this).attr("src")+"-")
and whether is there any space between -(hypen) and src value.
also try
alert(($(this).attr("src")=="http://XXX.jpg")), it should return true if the src is equal
Update: i can reproduce your problem -- you should have attached the event listener function for two times. check your original code. that is the problem. check your code. you can verify this by changing id to some other in jquery method and img tag