I am facing a strange issue. My concrete html looks like follows:
<div class="pages">
<div class="dynamicPages"></div>
<div class="staticPages">
<div class="span4">
<ul class="nav nav-stacked">
<li>
<textarea class="newcomment field span12"
style="width: 350px; height: 20px; resize:none; font-size: 60%"
id="newcomment${page.id}"
name="newcomment${page.id}"
placeholder="Enter comment here...">
</textarea>
</li>
</ul>
</div>
</div>
</div>
Now sometimes i generate the same html like what is inside the div class span4 and add it to div class dynamic like follows:
$(".dynamicPages").append(page_html);
this dynamic html i generate after i make a ajax call to the server.
I have the following jquery function when the user enters the enter key in the text area.
$(".pages").on('keydown','.newcomment',function(event) {
if(event.which == '13'){
... do some stuff
}
});
Everything works perfect now.
Now i wanted to the following plugin for my text area:
https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js
So i changed the above jquery like shown below
$('.pages .newcomment').autogrow().keypress(function(event){
if(event.which == '13'){
...
}
});
and in my previous mentioned ajax call in the success event i do something again so autogrow attaches itself to the dynamically generated element as mentioned in this How do I automatically run a method on a dynamically generated textarea with jquery?
$('.pages .newcomment').autogrow();
But now i see in case when i add dynamic html the jquery function is not getting called at all. When i reload the page i.e when the html is populated from server side attributes the jquery function is called properly.
$('.pages .newcomment').autogrow().keypress(function(event){
This line is equivalent to this:
$('.pages .newcomment').autogrow();
$('.pages .newcomment').keypress(function(event){
This won't work on dynamically-added elements, because they don't exist at the time of the bind. You do event delegation with on earlier in your code. You need to do it again, and abandon your attempt at chaining:
$('.pages .newcomment').autogrow();
$(".pages").on('keydown','.newcomment',function(event) {
Use delegate() instead of on().
.delegate()
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
Related
I have problem with events in my vue app.
I want to listen to events like that:
<div class="element" #click="elementClicked" >
<div class="childClass"></div>
<div class="anotherOne"></div>
// etc.
</div>
However I want to add additional selector, like I used to do in jquery:
$('.element').on('click', '.clickable', function() {
...
}])
And I cannot bind specific elements, because this is part of code I'm loading by ajax (buttons in datatable)
There is any good solution?
Thanks!
I have the below html. I am trying to access the div tag warningMessage under scripts.
<script id="notePopup" type="text/x-kendo-template">
<p class="notePopupMessage">Please enter a note:</p>
<input class="textNote k-textbox" type="text" maxlength="512" />
<div class="buttons">
<button class="add k-button">Add</button>
<button class="cancel k-button">Cancel</button>
</div>
<div id = "warningMessage" style="visibility: hidden" >
<p id="warningMsg" > Status change action note would not be saved until Save button is selected. </p>
<div>
</script>
I tried to access div id warningMessage and set the visibility to not hidden on certain events by doing something like this$("#warningMessage").show(); and it did not work.
What do we have to do different in order to access this div tag. I suspect its behaving like this because it is under a script tag.
Here is the Fiddle link.
Try running the kendo script first, then access the element by running the jQuery function you mentioned? I guess when the kendo script is finished, that template will be converted to valid html, and your div will be accesible for jQuery.
It won't work because you first set a visibility:hidden.
So either you set it to visible when the event occurs, or you first display:none this div and make it display:block (using show(), fadeIn() and so on) for this specific event:
Here is a fiddle for you: https://jsfiddle.net/liototo/jnmyswy4/1/
I set the warning div to:
#warningMessage{
display: none;
}
The jQuery part is then as follow (just an example):
$('.add').on('click' , function(){
if ($('.textNote').val())
$('#warningMessage').show();
else
alert('enter something!');
});
Here is the original html
<div class='cl_{{ $gen }}'>{{$gen->name}}</div>
<div class='jl_{{ $var }}'>{{$gen->name}}</div>
After looping over here is the html i got as output
I wanted to do if i click on the class cl_x, then the jl_x should be visible and other should be hidden and by default the first cl_1 should be visible. How can i do this ?
<div class='cl_1'>One</div>
<div class='cl_5'>Two</div>
<div class='cl_6'>Three</div>
<br>
<div class='jl_1'>Alpha</div>
<div class='jl_1'>Andrew</div>
<div class='jl_1'>Christ</div>
<div class='jl_5'>Anto</div>
<div class='jl_5'>Brito</div>
<div class='jl_6'>Oyster</div>
<div class='jl_6'>Beta</div>
Note : All the 1,5,6 are not standard as they are coming from database.
I really can't able to think how to achieve this. Help pls
But Here is what i have tried the logic
Inside Document Ready
Loop over the jquery like html
Write click event to show hide if they cick on cl_*
Trigger the click event for first occurance.
Don't worry about the html generated but the need is to write the jquery events dynamically or something else
But can't able to implement the code pls help
Script :
$(document).ready(function() {
//not sure whether i should loop over the jquery itself or write anything like the element starts with cl-* like that
});
Update :
Here is the Fiddle i have so far
You don't really want to use class for this - a custom data attribute makes sense, though. Like <div class="cl" data-number="{{ $gen }}"> with <div class="jl" data-number="{{$var}}"> on the other elements.
Then inside the $(document).ready(...) you can do something like:
$('.jl').hide().first().show();
$('.cl').click(function(){
$('.jl').hide().filter('[data-number="' + $(this).data('number') + '"]').show();
})
It would also be good to make up more meaningful names than "cl" and "jl" - classes should generally be semantic.
Would move the unique identifiers to a different attribute and add a common class to all the J group
<div class='cl' data-gen="{{ $gen }}">{{$gen->name}}</div>
<div class='jl jl_{{ $var }}'>{{$gen->name}}</div>
JS
$(document).on('click','.cl',function(){
$('.jl').hide().filter('.jl_' + $(this).data('gen') ).show();
})
Add a base "jl" class to all your html that has anything with a "jl_*" so that you will have access to anything overall that has the "jl" class then toggle it hidden or not hidden like so:
HTML:
<div class='cl {{ $gen }}'>{{$gen->name}}</div>
<div class='jl {{ $var }}'>{{$gen->name}}</div>
JS:
$(document).on('click', '.cl', function(e){
var classes = ($(e.target).attr("class").split(' '));
$('.jl').toggleClass("hide");
$('.jl' + "."+ classes[1]).toggleClass("hide");
});
Style:
.hide{
display: none;
}
https://jsfiddle.net/rc368gjp/
I'm trying to use jQuery's click function to apply a hover state to a selected div, without differentiating the div's in the JavaScript. I'm currently using:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
With the HTML:
<div class="project first project_gizmoscoop">
<div class="title">
GizmoScoop!
<div class="date">2012</div>
</div>
<a class="expand" title="(Caption)" href="#project_1">GizmoScoop!</a>
</div>
<div class="project project_sc">
<div class="title">
Striking Code
<div class="date">2011</div>
</div>
<a class="expand" title="(Caption)" href="#project_2">Striking Code</a>
</div>
The .hovered class is applied to the clicked link (specific styles from an external CSS file). However, everything is being chosen. (See http://www.codeisdna.com for an example).
I know what I'm doing wrong (I should be specifying the individual ID's or using HTML5 data attributes), but I'm stuck unnecessarily. I feel like a complete newb right now, that I can't do something this simple (although I've done more advanced stuff).
You simply need to take advantage of jQuery's flexibility (and good programming practice) and reduce your scope accordingly. You're already doing something similar with your variable definition. For example, to target only those a.expand elements inside the instance of .project that's clicked:
$(".project").click(function() {
$(this).find("a.expand").removeClass("hovered");
...
});
$(".expand").click(function() {
$(this).addClass("hovered");
..
});
i'm trying to exclude a class from a jquery function, but I can't seem to get it to work properly. i tried .not() but it didn't seem to be working correctly.
here's the basic structure I have...
<div id='spotList' class='clickableSpot id_117 '>
<div id='leftCheckboxBar'>
<form id='checkboxForm' name='checkboxForm'>
<input type='checkbox' class='spotCheck' unchecked id='117'/>
</form>
</div><!--end leftcheckboxbar-->
<div id='leftCredits'>
<ul class='credits'>
<li id='agencyItem'>Agency: <span class='creditText searchAgency'>Y&R</span></li>
</ul>
</div><!--end leftcredits-->
</div><!--END SPOT LIST-->
Now I have a jQuery function where you can either click on the .spotList checkbox directly or on the .spotList div. It looks like this, and it works properly...
$('.spotCheck, .clickableSpot').click(function(){
/*do stuff*/
});
I don't want the span .creditText to be included in that selector. I can't seem to figure it out. There has to be a way for me to exclude clicking on that span and triggering the function. But I need everything else in the div to be clickable, just not that piece of text within the span.
Any ideas?
You can use target property of the event object:
$('.spotCheck, .clickableSpot').click(function(event){
if (!$(event.target).hasClass('creditText')) {
// do something here
}
});
You can also you stopPropagation method:
$('.creditText').click(function(event){
event.stopPropagation()
})
http://jsfiddle.net/4rBaM/