首先不会触发JQuery中的change事件

Question

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?

Answer 1

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);
        }
    );

Answer 2

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 complete. 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>

Answer 3

Try using the live method

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

For more information on live Click here

Answer 4

Where is gettweetpreview coming 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.net/TNrPZ/

Answer 5

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 .

Answer 6

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()); });

Answer 7

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.