Show hide info.event.extendedProps.description Jquery - javascript

I am trying to make info.event.extendedProps.description field show hide when I click event title in Fullcalendar list view. But it only works partly.
Example here.
I added this under eventDidMount and works for line 1,3,5,7 etc. But not 2,4,6,8 etc
//Initially hide all the item-content
$('.item-content').hide();
// Attach a click event to item-title
$('.item-title').on('click', function() {
//Find the next element having class item-content
$(this).next('.item-content').toggle();
});

Use off(), off() method removes event handlers that were attached with .on(), so its works.
In your case:
$('.item-title').off().on('click', function () {
//Find the next element having class item-content
$(this).next('.item-content').toggle();
});
Note: I tested your code with off() on your codepen and it's work.

Related

How to disable the click on an icon after one click?

After clicking on the icon with ids (#prevleft and #nextright) , an ajax function is called. During the time ajax function loads a new table, I want to disable the icon click.
HTML Code:
hrHTML='<tr><th colspan="5"><i class="icon icon-chevron-left icon-2x lr"
style="float:left;" title="Previous Five Weeks"
id="prevleft"></i>' +"Weekly Utilization"+'<i class="icon icon-chevron-right
icon-2x lr" style="float:right;" title="Next Five Weeks" id="nextright"
></i></th>
</tr>';
The table row is appended dynamically as shown above. Want to disable #prevleft and #nextright after one click.
The following line doesn't work:
$('#prevleft').prop("disabled", true);
I am new to coding, so all help is appreciated.
Just check with the version of the jquery your using, I hope that your using jquery 1.5 or below
For jQuery 1.6+
Use can use .prop() function:
$('#prevleft').prop("disabled", true);
$("#nextright").prop("disabled", true);
For jQuery 1.5 and below
You need to use .attr() and disable the icon
$("#prevleft").attr('disabled','disabled');
$("#nextright").attr('disabled','disabled');
and for re enable the icon (remove attribute entirely):
$("#nextright").removeAttr('disabled');
$("#prevleft").removeAttr('disabled');
Assuming you have an event handler on a icon, in any version of jQuery you can use the following property to check if your icon is enabled or not
if (this.disabled){
// your logic here
}
Bind simple a click event when clicked on prevleft and prevright id icon.
$("body").on("click","#prevleft ,#prevright",function(){
var _this = $(this);
$(this).prop("disabled","true");
// ajax call code right here
// on ajax success function right this line
success: function(resp){
_this.prop("disabled","false");
}});
})
You have attached an event listener to one or more elements that do not yet exist in document. You can use event delegation, or jQuery() function to attach event to element when created.
Pass html string to jQuery(), use .find() to get "#prevleft", #nextright selectors, attach click event using .one(), append jQuery() object to document
$(elementWherehrHTMLIsAppended)
.append(
$(hrHTML)
.find("#prevleft, #nextright")
.one("click", function() {
$(this).prop("disabled", true)
}).end()
);
You can add a class to the element and check for the class when the user clicks.
For example:
$('#prevleft').click(function(){
if($(this).hasClass('clicked')){
// do nothing or return false
}else{
// ajax call
// on a successful call you can add the class using:
$('#prevleft').addClass('clicked');
}
});
Let me know if this is what you were asking for. This also gives you the ability to add an alert or do something if the button was already clicked.
Hope this helped!
Try my code, this event only called when icon hasn't class 'clicked', in the first call we will add 'clicked' class to prevent this event from this time.
$('#prevleft:not(.clicked), #nextright:not(.clicked)').on('click', function(){
$(this).addClass('clicked');
});
Hope this can help you!

Click event on dynamic elements not working

In framework7, how to add click event on dynamic elements?
If I add my element first on my view, the click event works fine like below:
<div class="test">Click Me</div>
$$('.test').on('click', function () {
myApp.alert("Gotcha!");
});
But if I have dynamic elements, especially elements dynamically added to virtual-list, I cannot make the click event to work. What is the right way to do this?
I even tried inline function, ex: <div class="test" onclick="myFunction();">Click Me</div>, still this won't work.
You can use:
// Live/delegated event handler
$$(document).on('click', 'a', function (e) {
console.log('link clicked');
});
For your case:
$$(document).on('click', '.test', function(e){
console.log('Some code...');
});
Here is docs. Scroll until events section.
Use this for dinamically added elements:
$$(document).on('click', '.test', function () {
myApp.alert("Gotcha!");
});
All answers are good to go with. But if you are using this class 'test' for other elements of the page, you will end up firing some extra click event(when you click on any other element of same class). So if you wanna prevent that, you should add listener to that particular element.
if you're adding an element of class test to an existing element of id testId, then use
$('#testId').on('click', '.test', function(this){
}
In the function where you dynamically add the new elements you have to assign an event handler for them.
Lets say you have a function something like this
function addNewLines(){
//add the new lines here
// you have to run this again
$$('.test').on('click', function () {
myApp.alert("Gotcha!");
});
}

Remove and add a class in a button jquery, can't make it work

I have a button on the page with a class next-main-button.
On page load, a modal is displayed and I have a button with class look-task-again. If I click on it I want to remove next-main-button class from next button and add this class next-task-error
Here is the next button:
<button type="button" class="btn btn-default next-main-button" id="next-button" >Next</button>
This event is executed when the modal button is clicked, here next-main-button is removed and next-task-error is added.
$(".look-task-again").off("click").on("click", function(){
$('#error-popup-message').modal('hide');
$("#next-button").removeClass("next-main-button");
$("#next-button").addClass("next-task-error");
});
If I inspect element the class is changed but if I click in the next button, the event with removed class is executed:
$('.next-main-button').off("click").on("click", function(){
nextButtonClick();
});
Not this:
$(".next-task-error").off("click").on("click", function(){
errorButtonClick();
});
I tried to use unbind method and to bind the button again, I did it like this :
$("#next-button").removeClass("next-main-button").unbind( "click" );
$("#next-button").addClass("next-task-error").bind( "click" );
In this way the next button is deactivated, nothing happens! Can somebody help me, please?
The selector that you used to get the element to bind the click handler on (i.e. .next-task-error or .next-main-button) is only executed once, and delivers one or more elements.
Then you bind a click handler to those element(s), but that binding has no knowledge of the selector you used to get those elements. The binding is done on the elements directly, and never again is their class verified (or whatever other selector you could have used).
To make it more dynamic, you could either (1) use event delegation, or (2) test the clicked element's class at the moment of the event, or (3) change the handler when the condition changes.
1. Event delegation:
$(document).on("click", ".next-main-button", function(){
nextButtonClick();
});
$(document).on("click", ".next-task-error", function(){
errorButtonClick();
});
Shorter version of the same, using chaining:
$(document).on("click", ".next-main-button", nextButtonClick)
.on("click", ".next-task-error", errorButtonClick);
2. Test class within the handler:
$('#next-button').on("click", function(){
if($(this).is('.next-main-button')) {
nextButtonClick();
} else {
errorButtonClick();
}
});
3. Alter handler when status changes
This is like you attempted to do: re-bind the correct handler when the condition changes:
// set initial click handler
$('#next-button').on("click", function(){
nextButtonClick();
});
$(".look-task-again").on("click", function(){
$('#error-popup-message').modal('hide');
$("#next-button").removeClass("next-main-button");
$("#next-button").addClass("next-task-error");
// replace click handler:
$('#next-button').off("click").on("click", function(){
errorButtonClick();
});
});
Shorter version, using chaining:
// set initial click handler
$('#next-button').on("click", nextButtonClick);
$(".look-task-again").on("click", function(){
$('#error-popup-message').modal('hide');
$("#next-button").removeClass("next-main-button")
.addClass("next-task-error")
.off("click")
.on("click", errorButtonClick);
});

Remove dynamic current element

I have form and Add button bottom of te form which is the right..and whenever click it's adding new a form with delete button and if I click it has to delete current form
my js code
$(".iade_sil").on("click",function(){
$(this).parents(".add_after").find(".group").remove();
});
and if you want you can see full demo and js files
codepen demo
You have to register the listener to watch all new elements too. And you want to use closest, not parents.
Even you dont need the closest too, you can select the .group directly, because your delete button is inside that element:
$(document).on("click", ".iade_sil", function() {
$(this).closest(".group").remove();
});
Also you can use closest to that gorup class
$(document).on("click", ".iade_sil", function() {
$(this).closest(".group").remove();
});
You need to use event delegation for attaching events to dynamically added DOM. You should also use .closest() instead of .parents() and traverse to group element:
$(document).on("click",".iade_sil",function(){
$(this).closest(".group").remove();
});

event handler triggered before event occurs in jquery

I am doing a mega drop down menu whereby a user clicks on an item to display the extension.
I want two results onclick of an item:
the extension to be displayed
the background color to change for the menu item(the one that is clicked)
but I am having a hard time and both of these results happen before the onclick event occurs.
All other things are so far good below is my code
//call the showMenu function to toggle menu items display
showMenu("#market", "#marketDrop");
showMenu("#jobs", "#jobsDrop");
showMenu("#career", "#careerDrop");
showMenu("#tech", "#techDrop");
showMenu("#estate", "#estateDrop");
showMenu("#fair", "#fairDrop");
showMenu("#leisure", "#leisureDrop");
showMenu("#exclusive", "#exclusiveDrop");
//the showMenu function
function showMenu(listItem, dropDown){
//first hide the main drop down containers
$(dropDown).hide();
$(listItem).click(function() {
$(dropDown).fadeToggle();
});
$(listItem).click().css("background-color", "#000");
}
Your last line is triggering a click immediately, not binding a click handler.
Try this:
function showMenu(listItem, dropDown){
//first hide the main drop down containers
$(dropDown).hide();
// register the click handler
$(listItem).click(function() {
$(dropDown).fadeToggle();
$(this).css("background-color", "#000");
});
}
NB: modern jQuery uses .on('click', ...) rather than .click(...). It helps avoid the confusion with .click being used to both trigger and bind handlers, depending on the argument list. I haven't modified your code to use that just in case you're still on an old version of jQuery.

Categories