Keerthivasan Keerthivasan - 1 month ago 6
Javascript Question

Two separate click event having different functionality for same button?

I sam using requireJS to generate the code Dynamically and also load the elements whenever the need,
i've two javascript classes that using same UI (html) elements,
Now i want bind the click event in two classes for same button.
two classes having completely different functionality in button triggers

HTML Code

<div class='command-processor'>
<div class='left-control' id='left-control'>
<img src='images/options.png' class='ctrl-image'/>
</div>
<div class='controls'>
<span class="previous" id="previous"><</span>
<input type='text' name='text-control' id='text-control' />
<span class="next" id="next">></span>
<input type='button' id='send' value='send' />
</div>
<div class='right-control' id='right-control'>
<img src='images/options.png' class='ctrl-image'/>
</div>
</div>


JS Code
class1 = View

// some stuff

_data=$("#user-input").val();
$(".command-processor").off("click","#send");
$(".command-processor").on("click","#send",function()
{
f.sendData(_data,dest);
});


class2 = Field

$(".command-processor").off("click","#send");
$(".command-processor").on("click","#send",function()
{
var data=[];
var item={};
if(this.fieldData)
{
for(i=0;i<this.fieldData.length;i++)
{
item[this.fieldData[i].FieldName]=this.fieldData[i].DefaultValue;
}
data.push(item);
var _data = JSON.stringify(data);
f.sendData(_data,dest);
this.fieldData=null;
}
});


When First Class View is loaded to the browser, the class click event for send button works well,
and also the second class Field is loaded to the browser, the class click event for send button works well.

after first class works are finished, i am loading the second class from my time class..

In Second class, when send button triggers , once its completes the send button functionality execution finished,
i want to activate the first class View click Event For Button

Thanks in Advance ! awaiting responses

Answer

in your second class, send button click triggers, after execution of click event, call the method from first class which re-initialize the events in first class.. Second Class:

$(".command-processor").off("click","#send");
$(".command-processor").on("click","#send",function()
{
    var data=[];
    var item={};
    if(this.fieldData)
    {
        for(i=0;i<this.fieldData.length;i++)
        {
            item[this.fieldData[i].FieldName]=this.fieldData[i].DefaultValue;
        }
        data.push(item);
        var _data = JSON.stringify(data);
        f.sendData(_data,dest);
        this.fieldData=null;
        ctrl.trigger("ReInitialize",[]);
    }
});

First Class

ctrl.on("ReInitialize",function(event,info)
{
       this.initEvents();
});

this is sample code to work between classes and prototypes

Comments