Develop Reference

How to close easyui dialog when click outside?

In my project, I use easyui dialog.
I choose easyui-linkbutton to open dialog successfully.
Because it has no title, I want to close this dialog when clicking outside.
I don't know how to define.
Here is my js code:
<script>
$(document).ready(function()
{
$('#dlg').window('close');
});
</script>
Here is my html code:
<div class="easyui-panel" style="padding:5px;">
addNewFile
</div>
<div id="dlg" class="easyui-dialog" title="" data-options="iconCls:'icon-save'" style="width:88px;height:260px;top:160px;left:176px;padding:10px">
<label style="cursor:pointer">one</label><br />
<label style="cursor:pointer">two</label><br />
<label style="cursor:pointer">three</label>
</div>
Who can help me ?

try this one also and share the information if not work.write this code on document load.
$(document).mousedown(function(e) {
var clicked = $(e.target);
if (clicked.is('#dlg') || clicked.parents().is('.ui-widget-content') || clicked.is('.ui-dialog')) {
return;
} else {
$('#dlg').dialog("close");
}
});
});

Try once may this help.
$('#dlg' ).bind('clickoutside',function(){
$('#dlg' ).dialog('close');
});

$('#dlg' ).dialog({
clickOutside:true,
});
I have tested, it works fail.

Link not working on image?

I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});

img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.

here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});

I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.

Addthis share buttons inside bootstrap popover

I am having trouble getting the addThis buttons to show inside of a bootstrap popover. The code is in the html data attribute and the addThis script is firing correctly, but the buttons just don't show even though the code can be seen in it via inspector.
I've done a jsfiddle here:
http://jsfiddle.net/XW9bk/1/
<li id="share" class="text-primary" data-html="true" data-content="<div class='addthis_toolbox addthis_default_style addthis_32x32_style'><a class='addthis_button_preferred_1'></a><a class='addthis_button_preferred_2'></a><a class='addthis_button_preferred_3'></a><a class='addthis_button_preferred_4'></a><a class='addthis_button_compact'></a><a class='addthis_counter addthis_bubble_style'></a></div>" data-original-title="" data-trigger="manual" data-placement="right"><a class="text-success">Share</a></li>
$('#share').click(function() {
$('.vote, .favorite, #share').popover('hide');
$('#share').popover('toggle');
})
$(document).ready(function() {
var addthis_config = {"data_track_addressbar": true};
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335")
})
I've got it working in a way with:
$('#share').click(function() {
$('.vote, .favorite').popover('hide');
$('#share').popover('toggle');
addthis.toolbox('.addthis_toolbox');
})
The problem now is there is a delay of several seconds before the buttons are displayed in the popover. When the popover is hidden and then reopened, the buttons aren't there and again take a while to appear.
Anyone know what could be causing this?

It seems to be a timing issue with the script loading, combined with the fact that it is essentially dynamic content. This will work for your situation:
HTML
<div class="hidden">
<div class="the-content"></div>
</div>
<br />
<br />
JAVASCRIPT
$(document).ready(function () {
var addthis_config = {
"data_track_addressbar": true
};
var theCode = '<div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div>';
var theButton = '<button type="button" class="btn btn-default" data-container="body" data-placement="right" rel="popover">Popover on right</button>';
$('.the-content').append(theCode).promise().done(function () {
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335", function () {
setTimeout(function() { $('body').append(theButton); }, 1000);
$('body').popover({
selector: '[rel=popover]',
html: true,
content: function () {
return $('.the-content').html();
}
});
});
});
});
FIDDLE

I achieved what you were trying to do successfully, except that the problem was that share buttons were not clickable. Someone contacted AddThis support, this is the response they got;
Unfortunately without seeing it in action I can't diagnose the problem. If the buttons are visible but not clickable then there's either something hijacking the click action or another transparent element z-indexed over it.
I solved this problem by loading the AddThis buttons after the popover has been shown. See the code below;
<button type="button" class="btn btn-artist-add-share has-popover" rel="popover" data-placement="bottom" data-html="true" data-content="<div id='pcontent'></div>">Share <i class="fa fa-share padding-left-20"></i>
</button>
<script language="JavaScript">
$("[rel=popover]").popover({
html: true
});
$("[rel=popover]").on('shown.bs.popover', function() {
$('#pcontent').html("<div class='addthis_sharing_toolbox'></div>")
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fa624772af11b1b")
});
</script>

jQuery working on second click only

Can anyone point the issue why I am unable to get the alert popup on first click? It works only every second click (i.e. doesn't work on odd number click and works on even number click).
HTML:
<div class="slider">
<div class="slider-box ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a>
</div>
</div>
jQuery:
$(document).ready(function() {
$("a.ui-slider-handle").click(function() {
alert('test');
});
});
I also tried but didn't work
$(document).ready(function() {
$("a.ui-slider-handle").mousedown(function() {
alert('test');
});
});

Hmm... have you tried to prevent the default anchor behavior? http://jsbin.com/IfirEBOj/2/edit
$("a.ui-slider-handle").click(function( event ) {
event.preventDefault();
alert('test');
});
In any case you should get familiar with some debugging tool and see what errors it throws. If any...

add: return false; to your command
$(document).ready(function() {
$("a.ui-slider-handle").click(function() {
alert('test');
return false;
});
});

Have you tried to void the href attribute?
$(document).ready(function(){
$("a.ui-slider-handle").attr('href', 'javascript:void(0)').click(function(){
alert('test');
});
});

Try this:
<div id="slider"></div>
$(document).ready(function () {
$("#slider" ).slider();
$("#slider").on('click','a',function () {
alert('test');
});
});
check the fiddle:
http://jsfiddle.net/3zEX5/2/
UPDATE:
I think you are clicking on the div first and then the anchor tag comes near it i.e the small slider button. so you are feeling as it is working on odd click, if you can clearly tell you requirment then we can suggest you some way

Multiple Jquery Dialogs on one page

I'm using jquery dialog popup.
I have multiple div's (dynamically created) that require the pop-up on a single page.
My current issue is when I click the .open, all (10) pop-ups are opening, how can I trigger only one?
My html is as follows:
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
My jquery is as follows:
<script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css
$(document).ready(function () {
$('a.open').prop('id', function (i) {
return '' + (i + 1);
});
$(".dialog").dialog({
autoOpen: false,
draggable: false,
width: "300px",
modal: true,
buttons: {
"Close": function () {
$(this).dialog('destroy').remove()
}
}
});
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")
.click(function () {
alert($(this).attr("id"));
$(".dialog").dialog("open");
return false;
});
});
</script>

This should work (or a variant of it).
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
alert($(this).attr("id"));
$(this).next(".dialog").dialog("open");
return false;
});

I feel the need to tell you to just use a class as your click handler
$(".open").click(function(e) {
e.preventDefault();
$(this).next(".dialog").dialog("open");
});
There's no need for the ID's if you're not using them.

If I am reading your code correctly what you are doing is
$('.dialog').dialog('open');
i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines
<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
and then do
$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.
that should I suspect do the trick