I am working on a post-comments project. Using AJAX I am generating comments. Each generated comments has Like button. But new generated Like button doesn't work until I refresh the page. The generated link is shown below.
<div class="comment-body-container">
<div class="comment-body">
Oye jetha lali
<a class="like-comment comment-like-color comment_main_id_45"
data-like-comment-id="45" href="javascript:;">
<i class="fa fa-thumbs-up"></i>
</a>
</div>
<div class="liked-this-comment liked_this_comment_45"></div>
</div>
Output after refreshing the page.
<div class="comment-body-container">
<div class="comment-body">
Oye jetha lali
<a class="like-comment comment-like-color comment_main_id_45"
data-like-comment-id="45" href="javascript:;">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
<div class="liked-this-comment liked_this_comment_45">
</div>
</div>
Output is almost same. But it doesn't work until I refresh the page. Could some one please provide me the solution for it.
For dynamic generated content you have to reapply the event after the content is loaded or, better, use event delegation to your likes button, something like that:
$(document).on("click", '.like-comment', function(event) {
//do your like stuff here
});
Event delegation works well with dynamic generated content and is the preferred way to handle this specific situation.
Related
My goal is move the element to another div and if then be able to return to his main div. This is my html
$('.low-filter-tags a.low-filter-label').click(function () {
$(this).clone().appendTo($('.low-filter-search'));
$(this).remove();
});
$('.low-filter-search a.low-filter-label').click(function () {
$(this).clone().appendTo($('.low-filter-tags'));
$(this).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="low-filter">
<div class="low-filter-tags">
<a class="low-filter-label">
Mobile
<i class="fa fa-times"></i>
</a>
<a class="low-filter-label">
Smartphone
<i class="fa fa-times"></i>
</a>
<a class="low-filter-label">
Laptop
<i class="fa fa-times"></i>
</a>
</div>
<div class="low-filter-search">
</div>
</div>
The first step works fine, but if I want to move the element from low-filter-search to low-filter-label it doesn't even detect the click event.
I'm trying to create a 'search/filter' with this buttons (a element) which will make show or hide some element if user selected it. Maybe you know any library and this can be done more easy.
Thanks
I think you'll need "delegated events" to allow for handling clicks on items which didn't exist when the original event handler was declared - the event handler will normally only attach to elements which are actually present and match the selector when the handler is created. Clearly, your moved elements don't fulfil that criteria.
Using delegated events, this problem is removed because the event is attached to an element higher up the DOM, which you know will always exist. You then tell jQuery to only actually execute the callback if it turns out that the underlying target of the event matched the second selector (given in the function parameters). This gets evaluated at the time the event occurs, rather than when the event handler was first created.
Demo:
$(".low-filter-tags").on("click", "a.low-filter-label", function() {
$(this).detach().appendTo($('.low-filter-search'));
});
$(".low-filter-search").on("click", "a.low-filter-label", function() {
$(this).detach().appendTo($('.low-filter-tags'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="low-filter">
<div class="low-filter-tags">
<a class="low-filter-label">
Mobile
<i class="fa fa-times"></i>
</a>
<a class="low-filter-label">
Smartphone
<i class="fa fa-times"></i>
</a>
<a class="low-filter-label">
Laptop
<i class="fa fa-times"></i>
</a>
</div>
<div class="low-filter-search">
</div>
</div>
See https://api.jquery.com/on/ in the section titled "direct and delegated event handlers" for more info.
P.S. You don't really need to clone and then remove the element. Instead you can simply detach it, and re-attach it somewhere else. My demo reflects that change.
To achiev that you need the jquery on() method.
When your document is loaded and elements are present in the DOM the click() method can bind them. Everything works just fine. Appending elements later on so after click() was processed they will be unknown to that event. The on() can help here. The idea is to bind a parent and proof the clicked element is matching the condition. No matter if it is newly created or not. See this in action below.
$('.low-filter').on('click', '.low-filter-tags a.low-filter-label', function() {
$(this).clone().appendTo($('.low-filter-search'));
$(this).remove();
});
$('.low-filter').on('click', '.low-filter-search a.low-filter-label', function() {
$(this).clone().appendTo($('.low-filter-tags'));
$(this).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="low-filter">
<div class="low-filter-tags">
<a class="low-filter-label">
Mobile
<i class="fa fa-times"></i>
</a>
<a class="low-filter-label">
Smartphone
<i class="fa fa-times"></i>
</a>
<a class="low-filter-label">
Laptop
<i class="fa fa-times"></i>
</a>
</div>
<div class="low-filter-search">
</div>
</div>
tl;dr: How would I implement an accessible popover? (I'm using bootstrap at the moment, but open to any ideas)
One of the biggest accessibility problems I face is the use of popovers when providing extra help information.
The way I understand it, popovers (and I guess more broadly, modals) are used for extra information when a tooltip cannot suffice. Popovers require the user to "open/click/activate" a help button for a new DOM element to be appended (or otherwise displayed), with the help information. While tooltips passively shows/speaks information whenever a user focuses the element. The tooltip widget itself is still being considered by WAI-ARIA
Say I have a text-input field with a label. I want to attach supplementary content to that input, in the form of a clickable/actionable button.
Initially I had the popover button in the label, before finding out the hard way that label's can't have block-level child elements.
I'm aware this probably isn't the best way of implementing an accessible popover. Here is my help button:
<div class="facs-ctl-help">
<a role="button" aria-label="Show help for Template Id 2,003" tabindex="0" data-toggle="popover" title="">
<span class="fa fa-info btn-floating waves-effect facs-help-icon"></span>
</a>
</div>
and here is my popover:
<div class="popover tooltip-help" role="tooltip">
<div class="arrow"></div>
<h3 tabindex="-1">
<i class="fa fa-info btn-floating waves-effect facs-help-icon"></i>Help
<span class="offscreen"> for Template Id 2,003</span>
<span class="offscreen"> popup</span>
</h3>
<div class="popover-body"></div>
<input type="button" class="btn pull-right tooltip-hide-btn" value="hide" aria-label="Hide help for Template Id 2,003">
<div style="width: 100%; clear:both;"></div>
</div>
What should I be using/doing? Would this be a good use case for live-regions? If so, any example code?
It doesn't necessarily have to be a live region. It feels more like a modal dialog, especially if you have interactive elements in it, such as the hide button.
There's a working example of an accessible modal dialog on https://github.com/gdkraus/accessible-modal-dialog
i add toolbar at main view.for some reason i enable to paste code at StackOverflow code section.
look at image
2.onclick event at toolbar works with <a> tag but not work with <div> tag.
<a onclick="playButton()" class="link size-50" id="play"><i class="fa fa-play-circle" aria-hidden="true"></i></a>
above code work fine.
<div id="myProgress" onclick="alert(11)">
<div id="myBar"></div>
</div>
on same page on click at div tag not working
My modal div is:
<div class="modal" id="showmodal"><!-- content here --> </div>
Now I am calling it with data-toggle='modal' following anchor is coming with DOM:
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
and its working.
Now when I appending another link from javascript like following
<a class data-toggle="modal" data-target="#showmodal">click </a>
It's not working. Can anybody tell why? Thanks in advance.
When you have added first a tag
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js knows on which element it need to attach model window event.
but when you dynamically appended
<a class data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js does not know the element exists in DOM.
so you need to manually call the js function to open model.
$('#showmodal').modal(options)
In your JS code.
Hope this helps.
I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>
remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.