Community

jQuery Drupal Behaviors onclick interacting with flag jQuery click

Hi,

I've got a problem and I just don't understand why it's happening. I am heavily modifying a module which uses jQuery and it's now basically working except it is picking up clicks on module flag which also uses

$(this) when someone flags a node.

I don't know how to keep the click events separate from flag module. A click event happens on the flag which is part of the area and my code is picking up on this click event and executing

$("#id .idclass").once('myDrupalbehavior').click(function() {
$(".myelementclass").slideToggle("slow");
$(".myelementclass").toggleClass("hide");
});

====================

I'm really new to Drupal behaviors and jQuery and it's weird, for it's only on one type of display where this happens other types of load to the element, the flag jQuery click event is not acted upon by myDrupalbehavior.

Any ideas where to look to stop clicks on other elements in the page from being inputs into myDrupalbehavior.click(fuction() {

I've tried to add code to identify the flag css and #flag (which doesn't seem to exist) to stop my routine from reacting to clicks on flags but so far not working and I'm sure it's something I'm doing wrong.

Thanks much.

Comments

Hi Robert, without seeing

Hi Robert, without seeing your code it's hard to be precise but it sounds like the element you are tracking clicks on includes the flag element, in which case what's happening is correct. You could either make your jQuery more selective so it doesn't include the flag, or you could override the flag module's click handler so the click doesn't propagate.

http://api.jquery.com/event.stopPropagation/

Thanks how to limit scope of two different scripts?

I took the "ideal_comments" module as a base to start with since it was the least spaghetti, but after this is done, I doubt any of the original code will be present. The entire PHP forms needs to be rewritten, and only load when clicked. Don't even ask me about incorporating anti-spam into the forms (that's last).

Right now I'm just trying to get the jquery side to work and this is a true hack job on my part, although am testing for security exploits to make sure none are present.

The flag in question is a "recommend this comment" button, wrapped inside the links of the comment.

In the flag .js I see he uses $(this) for onclick events.

The $(.comment) css has the flag inside the comments links. So, when the recommend button is clicked, "ideal_comments" (let's just call it that since it's the base) js, is taking that flag click event as an onclick event in it's own script.

Ideally I'd like to completely separate out the two scripts and have them not even load until comments are displayed. Then, I'd like to separate out the two scripts from each other.

Beyond replacing css ids and classes for "this" in $(this).onclick() in "ideal_comments" js,

Is there a better way to really limit the scope of the two scripts so $(this) is limited to "flag" and
if ideal_comments uses $(this) it is limited to just the ideal_comments.js?

To me, that's ideal, just do not load the script at all until comments are clicked to display and only when the recommend button is to be displayed for use. Some sort of defer js loading thing. Why load the scripts when the site visitor isn't even looking at comments at all?

Sorry if this is vague, going by the seat of my pants, reading the API, trying things out, yet to really find a tutorial that is in depth, yet not verbose, so reading code and so on, real hack.

I also am trying not to rewrite flag because when updates happen, then I have to patch and so on and that's a huge pain.

I'll try your rec. but I really would like to just separate these two scripts out from each other 100%, kind of the idea like local variables in functions or classes in regular programming (C, C++, etc.).

var curclick = $(this); maybe?