javascript - Setting the valuetext of event.target with jQuery - Stack Overflow

admin管理员组

文章数量:1295928

I have the following HTML:

<a class="small" href="/ments/new">Write New Comment</a>

And the following js:

$(document).ready(function () {                                               
   $('ment > a').click( function (event) {                                
         var url = event.target.href                                          
         $('ment_area').load(url)                                         
          **event.target.text = ""**
          event.preventDefault()                                              
       })                                                                     
   })

I am trying to set the text of the link to blank, but can't seem to find a way to do this. I've also tried:

event.target.text("")
event.target.value = ""

and none of these work. Is this even possible to do from the JavaScript side?

I have the following HTML:

<a class="small" href="/ments/new">Write New Comment</a>

And the following js:

$(document).ready(function () {                                               
   $('.ment > a').click( function (event) {                                
         var url = event.target.href                                          
         $('.ment_area').load(url)                                         
          **event.target.text = ""**
          event.preventDefault()                                              
       })                                                                     
   })

I am trying to set the text of the link to blank, but can't seem to find a way to do this. I've also tried:

event.target.text("")
event.target.value = ""

and none of these work. Is this even possible to do from the JavaScript side?

• javascript
• jquery

Share Follow asked Jan 28, 2014 at 19:52 reectrixreectrix 8,6292121 gold badges5959 silver badges8484 bronze badges 3

• Please read the jQuery tutorial about basic event handling: "In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this. To turn the DOM element into a jQuery object that we can use jQuery methods on, we simply do $( this )". Tutorials are great, they help a lot! You should read them! – Felix Kling Commented Jan 28, 2014 at 19:58
• From everything I've been reading, it's kind of ambiguous when to use event.target, vs $(this)...since $(this) could also refer to the surrounding DOM element, whereas event.target refers to the element that was actually clicked on. – reectrix Commented Jan 28, 2014 at 20:22
• this refers to the element the handler is bound to (unless you use jQuery's event delegation mechanism). In any case, this page also mentions that event.target is "the DOM element that initiated the event". And the part I quoted says that we pass DOM elements (e.g. this) to $ (e.g. $(this)), to create a jQuery object. I'm just saying that all the information is there, you just have to put the pieces together :) – Felix Kling Commented Jan 28, 2014 at 21:15

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You could simply use this.

$('.ment > a').click( function (event) {
    $(this).text(""); 

    //Other stuff
});

You don't have to use event.target

this refers to the element which you have attached the event. In your case, $('.ment > a')

If you have multiple anchor links directly under the container .ment, it helps to differentiate between them & you could do specific things with each of those anchor links.

To set the text to blank use this method .text('').

So, you method would change to the following one:

$(document).ready(function () {                                               
   $('.ment > a').click( function (event) {                                
      var url = event.target.href;
      // this can be replaced by the following
      var url = $(this).attr('href');
      $('.ment_area').load(url);                       
      $(this).text(''); // empty the current string
      event.preventDefault();
   });
});

It is better practice to add ; at the end of the code lines! :)

You're using jQuery so why stick with Javascript alone?

$(document).ready(function () {                                               
   $('.ment > a').click( function (event) {                                
         $this = $(this);
         var url = $this.attr('href');
         $('.ment_area').load(url)                                         
          $this.text("");
          event.preventDefault()                                              
       })                                                                     
   })

This will save you the headaches of different event structure in different browsers

Try :

event.target.innerHTML = "";

or

event.currentTarget.innerHTML = "";

or

this.innerHTML = "";

event.target is the very first element on the top of the DOM. It mean that if there is a span in your a, the span will be selected.

That's why using currentTarget is safer since it is the element on which the event is binded.

this by default is the same as currentTarget but this value can be altered by .apply(), .call() or .bind.

Do you mean so it disappears? You could do:

$(this).hide();

or

$(this).text("");

本文标签： javascriptSetting the valuetext of eventtarget with jQueryStack Overflow