Rewriting .click on an element once used in jQuery

Question

The question is: how can I make it so that every time openZonePupup() is called, whatever is assigned to the .click function changes on every call because right now it only changes on the first call ofopenZonePupup()

Let me first try and explain what the program does through prose and examples. This is for an online course which is split up into units. once a unit is clicked on a box pops up asking the user if they want to do a lesson or an exercise and then the lesson and exercise button has a function attached, with specific variables related to that lesson or exercise, to it with the .click function.

The problem is that once one unit has been clicked upon and the specific variables in the function applied using the .click function, once this popup has been closed and the user clicks on another unit, it uses the same specific variables from the first time. Maybe looking at my code would help you better:

Popup HTML:

<div class="jqmWindow" id="dialog">
    <a id="popupHide" href="javascript:;" onclick="$('#dialog').jqmHide();" style=""></a>

    <div id="zoneName"></div>
        <div id="buttons">
            <a id="lessonButton" class="lessonButton">Lesson</a>
        <a id="exerciseButton" class="exerciseButton">Exercise</a>
    </div>
    </div>
</div>

The function called when the link to the unit is clicked on. It applies the name to the popup html and sets the link to the lesson and exercise according to the variables specified, then after it shows the popup:

function openZonePupup(name,juegoID,tipoID,lang,nivel) {
    $("#zoneName").html(name);

    $(".lessonButton").click(function () { 
    $('#dialog').jqmHide();
        abrirLeccion(juegoID,nivel);    
    });

    $(".exerciseButton").click(function () { 
        obreJoc(juegoID, tipoID, name);
        $('#dialog').jqmHide();
    });

    $('#dialog').jqmShow();
}

openZonePopup is called by the text for the unit, for example:

<a href="javascript:;" onclick="abrirZonePopUp('Past Simple - Past Continuous ',8,2,'EN',1);">02</a>
<a href="javascript:;" onclick="abrirZonePopUp('Conjunctions',22,8,'EN',1);">14</a>

I hope you understand, if not leave a comment and i'll respond asap, thanks for any help that you can give!

Might just be me, but I'm having a hard time understanding what the actual question is. — James Montagne
– James Montagne, Commented Nov 30, 2011 at 19:58
The question is: how can I make it so that every time openZonePupup() is called, whatever is assigned to the .click function changes on every call because right now it only changes on the first call ofopenZonePupup() — Jake
– Jake, Commented Nov 30, 2011 at 20:02
openZonePopup is called by the text for the unit, for example: <a href="javascript:;" onclick="abrirZonePopUp('Past Simple - Past Continuous ',8,2,'EN',1);">02</a> — Jake
– Jake, Commented Nov 30, 2011 at 20:03
There's like four things just in ONE of your lines, FYI: <a id="popupHide" href="javascript:;" onclick="$('#dialog').jqmHide();" style=""></a> 1) Your href value is horrible, use either a hash, javascript:void(0) or exclude it all together. 2) Onclick? You're using jQuery, the whole purpose of which is unobtrusive binding. 3) Why do you have an empty style property? 4) Your link is inaccessible because it doesn't have content in it. Use CSS to apply a negative text-indent if you want to hide the words--it's best practice. — Adam Terlson
– Adam Terlson, Commented Nov 30, 2011 at 20:09
Thanks for the comments, any idea on how to solve my problem? Thanks — Jake
– Jake, Commented Nov 30, 2011 at 20:11

karim79 · Accepted Answer · 2011-11-30 20:11:29Z

2

As a first step I would try unbinding the click handlers before binding them to the specific values passed by the function.

function openZonePupup(name,juegoID,tipoID,lang,nivel) {
    $("#zoneName").html(name);

    $(".lessonButton").unbind("click").click(function () { 
        $('#dialog').jqmHide();
        abrirLeccion(juegoID,nivel);    
    });

    $(".exerciseButton").unbind("click").click(function () { 
        obreJoc(juegoID, tipoID, name);
        $('#dialog').jqmHide();
    });

    $('#dialog').jqmShow();
}

answered Nov 30, 2011 at 20:11

karim79

343k67 gold badges420 silver badges409 bronze badges

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

1 Comment

Adam Terlson Over a year ago

Hopefully OP sees this... jQuery created One for this very thing. Use it instead of unbinding and rebinding.

Adam Terlson · Accepted Answer · 2011-11-30 20:16:43Z

0

[I think] to answer your question, instead of doing just click and instead of doing unbind then click, you can use jQuery's awesome One function.

function openZonePupup(name,juegoID,tipoID,lang,nivel) {
    $("#zoneName").html(name);

    $(".lessonButton").one('click', function () { 
        $('#dialog').jqmHide();
        abrirLeccion(juegoID,nivel);    
    });

    $(".exerciseButton").one('click', function () { 
        obreJoc(juegoID, tipoID, name);
        $('#dialog').jqmHide();
    });

    $('#dialog').jqmShow();
}

answered Nov 30, 2011 at 20:16

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

Collectives™ on Stack Overflow

Rewriting .click on an element once used in jQuery

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