This JavaScript Function Works Alone, But Not With Other JavaScript Functions

Question

I have this javascript :

<script type="text/javascript">
$(document).ready(function($) {
        $('#target-share ul li').click(function() {
            $('input#shareto').val($(this).data('val'));
        });
    });
</script>

and it really works as I expected. but when I add this another javascript to do drop-down animation, that javascript not working anymore :

<script type="text/javascript">
$(document).ready(function() {
    $("#select-shareto a").click(function () {
        var newClass = $(this).find("span").attr('class');
        var newText = $(this).find("span").text();
        $("#select-shareto a").removeClass("selected");
        $(this).addClass("selected");
        $("a#to-chosen span").removeClass().addClass(newClass).text(newText);
        $("a#to-chosen").toggleClass("opened");
        $('#select-shareto').slideToggle('fast');
        return false;
    });

    $('a#to-chosen').click(function() {
        $(this).toggleClass("opened");
        $('#select-shareto').slideToggle('fast', function() {
            // Animation complete.
        });
    });
});
</script>

those javascript actually affected on this HTML code :

<div id="target-share">
<a href="#" title="" id="to-chosen" class="default"><span class="to-admin">Admin</span></a>
<ul id="select-shareto">
<li data-val="0-1">
<a href="#" title="" class="selected"><span class="to-Finance">Finance</span></a>
</li>
<li data-val="1-1">
<a href="#" title=""><span class="to-admin-private">Admin Private</span></a>
</li>
<li data-val="1-0">
<a href="#" title=""><span class="to-ceo">CEO</span></a>
</li>
<li data-val="0-0">
<a href="#" title=""><span class="to-ceo-private">CEO Private</span></a>
</li>                                    
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->

any idea how to make those 2 javascript works side-by-side? thanks.

Is there anything in the Javascript console? Maybe you misplaced a brace somewhere — millimoose
– millimoose, Commented Jul 27, 2012 at 18:23
Why you are passing the "$" as paramter in the first function to the "ready" event? — Estefano Salazar
– Estefano Salazar, Commented Jul 27, 2012 at 18:28
Ok, seriously now. Have you tried putting it into a single ready function block? — kakridge
– kakridge, Commented Jul 27, 2012 at 18:31
@kakridge: That doesn't matter. @Estefano: That's a common technique to ensure that $ really points to jQuery, especially when used with noConflicts() — Bergi
– Bergi, Commented Jul 27, 2012 at 18:42

Bergi · Accepted Answer · 2012-07-27 18:33:01Z

7

$("#select-shareto a").click(function () {
    ...
    return false;
});

Hereby, you stop the further propagation of this event - other handlers for this click event won't be called any more. Instead, use this:

$("#select-shareto a").click(function (e) {
    e.preventDefault();
    ...
});

(Demo at jsfiddle.net)

edited Jul 27, 2012 at 18:33

answered Jul 27, 2012 at 18:27

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saint Robson Over a year ago

IT WORKS!!! thanks bro!!! I must wait another 3 minutes to toggle your answer... great job, bro!! thanks again...

Kpower · Accepted Answer · 2012-07-27 18:26:22Z

0

I'm assuming you tried to insert the code where the comment animation complete is and if so you just need to put the code:$('#target-share ul li').click(function() { $('input#shareto').val($(this).data('val'));});

Your code is already wrapped in a $(document).ready so you don't need another one.

answered Jul 27, 2012 at 18:26

Kpower

1,2573 gold badges11 silver badges19 bronze badges

Collectives™ on Stack Overflow

This JavaScript Function Works Alone, But Not With Other JavaScript Functions

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related