I have a structure like this:
<ul id="container">
<li>
<div tabindex="1" class="selectThis">
<div>
<div>
<span class="textToEdit" contenteditable="true"></span>
</div>
</div>
</div>
</li>
<ul>
Where it works to bind an event to the contenteditable span:
$("#container").on("keydown", ".textToEdit", function (e) {
alert("yes");
});
But the div itself doesn't react:
$("#container").on("keydown", ".selectThis", function () {
alert("no");
});
Using .on because the whole thing is dynamically generated, besides the container. I'm using jquery UI's sortable on said container. What is wrong with the binding? I've tried giving the ul and li a tabindex too, but the div still won't give me an alert.
The problem was that the div wasn't being focused after sortable is called on the ul--manually calling $(".selectThis").focus() makes it work. Thanks to Pilgerstorfer Franz for making me aware of this!
Related
i have some <div></div> elements with draggable="true" attribute but same thing gets applied on child elements,but i dont want to apply it on child elements, So how do i prevent this default behavior?
code :
<div draggable="true" ondragstart="play(event)" ondrop="pause(event)" id="move">
<span id="text">
drag me
</span>
</div>
as i used dragable="true" on <div> so span also gets the same property.
I was having a similar event with a sortable drag-and-drop "list" I created. Each "row" of the list looks like this.
<div class='row' draggable='true'>
<div class='drag-handle' ></div>
<img class='icon-image' draggable='false'>
<input type='text' name='demo' >
<button class='remove-btn' onclick='removeItem(this,event)'>Remove</button>
</div>
When I tried selecting the text inside of the "input" element, somehow I would start dragging the whole "row". As frustrating as this was, the best solution I found was to simply apply the draggable='true' property to the item with the class="drag-handle" which would be my dragging icon that would fire the ondragstart(e) event.
The rest can be handled in JS
In JS, reference the parent element "row" by using the closest(".row") method
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('.drag-handle').forEach(handle => {
handle.addEventListener("dragstart", dragStart)
handle.addEventListener("drag", dragging)
handle.addEventListener("dragend", dragEnd)
})
function dragStart(e) {
document.querySelectorAll(".row").forEach(row=>{
row.addEventListener("dragover", dragOver)
})
var target_row = e.target.closest(".row")
target_row.classList.add("dragging")
}
Note:
I added a class of "dragging" to the one "row" that was going to be dragged so I could do a querySelectorAll('.row:not(.dragging)') for other operations, classes, etc, however, this is NOT required for the intended purpose to work. Just a bit more context that hope helps your problem.
I read that Angularjs directives require a different approach than jquery. I am new to angularjs, so it will be great if somebody can explain how to use directives for this simple example. If you click on bottom div, then it moves (re-parent) the top image to the bottom div. I could add this jquery code on ng-click... but is there a better way?
JQUERY INTENT:
$("#bottom").click(function(){
$("#myimage").appendTo("#bottom");
});
ANGULARJS:
<div ng-app="myapp">
<div data-ng-controller="mycontroller">
<div id="top" style="background-color:red;width:200px;height:200px">
<img id="myimage" src="//placehold.it/150x150">
</div>
<div id="bottom" style="background-color:green;width:200px;height:200px">
</div>
</div>
</div>
Instead of listening for a click in jQuery, you can use Angular's ng-click directive to specify a function to call when the element is clicked and you can use the ng-if directive to add/remove the image, for example...
<div ng-click="appendImage()" id="bottom" style="background-color:green;width:200px;height:200px">
<img ng-if="showImage" id="myimage" src="//placehold.it/150x150">
</div>
Then in your controller...
angular.controller('myController', function ($scope) {
$scope.showImage = false;
$scope.appendImage = function (event) {
$scope.showImage = true;
};
});
A key difference between plain jQuery and Angular is that in jQuery you have to write code to manipulate the DOM yourself (like appending the image). If you use directives properly in Angular, you simply make changes to the $scope and directives will update the DOM for you automatically
I want to assign a div to the tooltip content. One way is to have a inline div as given in the example in website:
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>')
});
});
However what I want is to have div seperately define like:
<span id='abc'><span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span></span>
and then define content as
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $($('#abc').html())
});
});
The reason I want to do this is because I am making dynamic css changes to '#abc' and everytime the tooltipster shows I want recent css changed to be incorporated.
thanks
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.children().html());
continueTooltip();
}
});
For me worked that improved version :)
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.next().contents());
continueTooltip();
}
});
That is even better! :) But make sure your tooltip content is just after your selector here .tip follows after div#my-tooltip and also is its child.
In addition to having the content be separately defined, I wanted the content for the tooltip to be nested inside the element that is clicked/hovered. I found the functionBefore option worked for me.
The markup might be:
<div id="my-tooltip">
click/hover me to show a tooltip
<div class="tip" style="display:none">
tooltip<br>content
</div>
</div>
And the js:
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.find('.tip'));
continueTooltip();
}
});
I'm quite new to Jquery and have a problem when I try to select child divs in my program. The point is to have a button that fires a jquery function. This function is meant to get all children divs from where the button is and hide them. Here is my jquery code:
$(".button").click(function () {
$(this).children('div').fadeToggle("fast", function () {
});
});
My html is quite simple. A div within a div and within the second div are two more divs.
<div class="clients>
<input type="button" class="button" id="button" value="Hide Sites" autopostback="false"/>
<div class="websites>
<div class="urls"></div>
<div class="data"></div>
</div>
</div>
This is not working though. I've tried using jquery.next and siblings but couldn't get these to work either. Jquery.closest looked upwards and found the container div (clients) but this wasn't what I needed either. Guys help? Thanks
You have broken html, closing quote missing here class="clients and here class="websites
and you have to use next() instead of children()
Live Demo
<div class="clients">
<input type="button" class="button" id="button" value="Hide Sites" autopostback="false"/>
<div class="websites">
<div class="urls">1</div>
<div class="data">2</div>
</div>
</div>
$(".button").click(function () {
$(this).next('div').fadeToggle("fast", function () {
});
});
try this format
$('.clients').on('click', $('.button'), function(){
});
Solved it by using jquery.siblings:
$(".button").click(function () {
$(this).siblings('div').fadeToggle("fast", function () {
});
});
I had previously tried siblings but I guess I had an error because now its working.
Thank you all!
I am using mootools and i want to load in a div (named response) content.
The div content i pass in javascript with $('response').set('html', content) where content is variable. in the content variable i have some html code with buttons and want to create a event handle ( click ).
the content I load with a json request and pass to the element:
<div id="undo">
<ul>
<li> <button value="1">foo</button> </li>
<li> <button value="2">bar</button> </li>
</ul>
</div>
my javascript looks like
$('undo').addEvents({
'click:relay(button)': function(ev, element){
alert('a button clicked!');
}
});
but I don't know why the event didn't work.
I think the problem is that $('undo') doesn't exist when the dom object is ready but i don't know how to fix this.
Delegate further up the dom tree to an element that is there at the time of domready block running. eg, if you have <div id=content>... </div> (or response if it's static)
document.id('content').addEvents({
'click:relay(#undo button)': function(event, element){
event.stop();
console.log(element.get('value'));
}
});
given that you inject your data there later on, this will work fine.