javascript - change event in JQuery doesn't trigger at first - Stack Overflow

admin管理员组

文章数量:1336185

I am quite new to jQuery. I am using it for one of my WordPress plugin. I have following code

<script type="text/javascript">
  $(document).ready(function(){
    $("#tmp-preview").html($("#title").val());
    $("#title").change(function(){
      $("#tmp-preview").html(getTweetPreview);
    });
  });
</script>

I want that every time text in title textfield of wordpress new post's page changes, it should reflect into a div. But the problem is, that event doesn't trigger on first change. I mean, if user write a title for first time and move focus to other part, that title is not updated in div. But then again if he changes the title, new title does reflect! Why does this happen like this?

And another thing I would like to know is, if I want that even though the focus in text field is not lost, title text get updated in div on each character's change, do I have to use keydown event or I can do it with change event somehow?

PS: Problem isn't with getTweetPreview() function. I have already tried using a simple string but still same. I believe this is happening due to some other function calls of wordpress as when title is finished editing, it auto save the draft. Can this be the issue? How to solve it, if it is?

I am quite new to jQuery. I am using it for one of my WordPress plugin. I have following code

<script type="text/javascript">
  $(document).ready(function(){
    $("#tmp-preview").html($("#title").val());
    $("#title").change(function(){
      $("#tmp-preview").html(getTweetPreview);
    });
  });
</script>

I want that every time text in title textfield of wordpress new post's page changes, it should reflect into a div. But the problem is, that event doesn't trigger on first change. I mean, if user write a title for first time and move focus to other part, that title is not updated in div. But then again if he changes the title, new title does reflect! Why does this happen like this?

And another thing I would like to know is, if I want that even though the focus in text field is not lost, title text get updated in div on each character's change, do I have to use keydown event or I can do it with change event somehow?

PS: Problem isn't with getTweetPreview() function. I have already tried using a simple string but still same. I believe this is happening due to some other function calls of wordpress as when title is finished editing, it auto save the draft. Can this be the issue? How to solve it, if it is?

• javascript
• jquery
• wordpress

Share Follow edited Jun 27, 2012 at 5:10 ksg91 asked Jun 27, 2012 at 4:57 ksg91ksg91 1,2991414 silver badges3434 bronze badges 12

• The .change() jQuery function just executes .onchange() browser function, which is not valid for <title>. – Praveen Kumar Purushothaman Commented Jun 27, 2012 at 4:59
• for the second query : you can not fire keyup and change event together. it will get stuck in some browser – xkeshav Commented Jun 27, 2012 at 5:00
• Can you post the relevant HTML? – Sang Suantak Commented Jun 27, 2012 at 5:00
• I didn't mean that title tag. I mean while writing a new post in wordpress, title text field. – ksg91 Commented Jun 27, 2012 at 5:00
• 2 @PraveenKumar first of all it not onchange. its .change() This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus. – xkeshav Commented Jun 27, 2012 at 5:07

 |  Show 7 more ments

7 Answers 7

Sorted by: Reset to default 3 +50

This may work:

$("#title")
    .on(
        "input", 
        function () {
            $("#tmp-preview").html(getTweetPreview); 
        }
    );

Try something like this if everything else fails:

var updateTweetPreview = function () { // DRY
    $("#tmp-preview").html(getTweetPreview); 
};

$("#title")
    .one( // sic.
        "keydown", 
        function () {
            updateTweetPreview();
            $("#title").on("change", updateTweetPreview);
        }
    );

Please use the on() function for events. live() is deprecated as of jQuery 1.7 source.

As for the actual problem, I think that WordPress' auto save is using ajax to load a copy of the data into the form when autosave is plete. That would cause your code to have it's contents overwritten. Try putting this in:

<script type="text/javascript">
  $(document).ready(function(){
    $("#tmp-preview").html($("#title").val());
    $("#title").on("change", function(event){
        event.stopImmediatePropagation()
        $("#tmp-preview").html(getTweetPreview());
    });
  });
</script>

Try using the live method

$("#title").live('change', function(){
  $("#tmp-preview").html(getTweetPreview);
});

For more information on live Click here

Where is gettweetpreview ing from? Cos this seems to work every time:

$("#tmp-preview").html($("#title").val());
$("#title").change(function(){
  $("#tmp-preview").html($(this).val());
});

​Working fiddle: http://jsfiddle/TNrPZ/

If getTweetPreview is a function, then you should be calling it rather than just referencing it. The code would look like:

$("#title").live('change', function(){
  $("#tmp-preview").html(getTweetPreview());
});

The only difference here is the inclusion of () after getTweetPreview.

I have seen this happen, and what fixed it was to call focus() on the element. Try making the call to focus() the very last thing done before the event occurs.

You can use the keyup event from the jQuery to have the content of your div updated without loosing the focus from the textbox.

Try this code.

$("#tmp-preview").html($("#title").val()); $("#title").keyup(function(){ $("#tmp-preview").html($(this).val()); });

本文标签： javascriptchange event in JQuery doesn39t trigger at firstStack Overflow