All geek questions in one place

JQuery / JavaScript - event.target.id in Firefox

I have a short script written that works fine in Chrome:

function updateSentence(){ $(document).ready(function() { t = event.target.id; $("#S"+t).html($("#"+t).val()); }); }

However, in Firefox, the event is not defined. I found several similar questions that suggested that the event should be passed as a function parameter:

 function updateSentence(event){ $(document).ready(function(event) { t = event.target.id; $("#S"+t).html($("#"+t).val()); }); }

However, for me, this solution does not fix the Firefox problem, and actually it breaks Chrome. In Chrome, it ends up event.target not being detected when they are being transmitted.

What am I doing wrong?

After receiving a few comments, I realized that the way I thought about jQuery in general was wrong. I did not want $(document).ready call every sentence update. Having cleared the function with this knowledge, I ended up:

 function updateSentence(){ t = event.target.id; $("#S"+t).html($("#"+t).val()); }

This still correctly updates the sentence in Chrome, but target remains undefined in Firefox. What do I need to do to get this working in Firefox? And am I still doing something fundamentally wrong in jQuery?

Also, to answer the question in the comments, the event I'm looking for is the onchange event that caused updateSentence() . This must be called when the select / text field changes.

(I'm still new to jQuery and JavaScript in general, and I'm sure I'm just making a simple mistake.)

I have found my answer. I will post in a couple of hours when the site allows me.

+6
source share
2 answers

Yes very good. If you rethink how you did it, it makes sense. Separate your commitment from your function, and this is half the battle with what you do.

 $(function() { // Equivalent of Document Ready; You only need this once; // BINDINGS HERE $('someSelector').on('change keypress', function(event) { updateSentence(this); }); }); function updateSentence(elem) { $('#S' + elem.id).html( elem.value ) ; }

And what's more, this is one of those cases that I would suggest not using a secondary function. In some cases, what you want to do is simple enough to make it difficult to justify the calling function other than what you are doing in communication.

 $(function() { $('someSelector').on('change keypress', function(event) { $('#S' + this.id).html( this.value ) ; }); });

You will notice that in both cases the need for event eliminated. However, it is available even for FF, since it will be passed as an n argument ( function(event) ).

The reason your "target" is undefined in your code for FF is because FF will not capture events in the air like most browsers do. Therefore, if you cannot configure your code to eliminate the need for event or pass it, as in my examples, you can access it through window.event .

+2
source

After taking into account what was mentioned in the comments above and reading what I did a little more, I found the answer to my question. First, I misused the call to $(document).ready every time the function was called. Further, my understanding of how the identifier is passed to the function seems incorrect. It seems that it is not transmitted automatically, but must be done manually. Therefore, my initial confusion as to why other commentators were embarrassed by my question. In any case, knowing these things, I found my answer in a combination of two other answers. They can be found in these two questions:

I'm sure I'm still saying something else in this explanation, but I will find out soon.

+1
source

Source: https://habr.com/ru/post/911779/

More articles:


All Articles