Обработчик событий не подключен после Ajax Update, новый элемент dom (Internet Explorer)

Question

Проблема: новые вставленные элементы Dom не были правильно подключены, функция deletepost не запускается. Это происходит только в IE и только для новых элементов, добавляемых в DOM.

$(function(){
        $('#postentry').submit(function() {
          var tyu = $('#tittle_ent').val();
          if(tyu.length <= 2)
            {alert('Enter More Text!'); return false;}else
            {
                $.ajax({
                    type:'post',
                    url: '/posts_in.php',
                    dataType: "json",
                    data: $("#postentry").serialize(),
                    success:function(data){
                        var tittle = data[0];
                        var id= data[1];                        
                        $('<div></div>').attr('id','post'+id).addClass('boxee').html(tittle).prependTo('#boxer');                        
                        $('<img src="img/page-text-delete-icon.png" name="'+id+'">').attr({id:'postchk'+id,onclick: 'deletepost(this.name);'}).appendTo('#post'+id);                        
                        $('#tittle_ent').val('').focus();

                    }
                });
                return false;
            }
        });
    });

Answer 1

Использовать JQuery Live

$(function(){
        $("#boxer img").live("click", function(){
          deletepost($(this).attr("name"));
        });

        $('#postentry').submit(function() {
          var tyu = $('#tittle_ent').val();
          if(tyu.length <= 2)
            {alert('Enter More Text!'); return false;}else
            {
                $.ajax({
                    type:'post',
                    url: '/posts_in.php',
                    dataType: "json",
                    data: $("#postentry").serialize(),
                    success:function(data){
                        var tittle = data[0];
                        var id= data[1];                        
                        $('<div></div>').attr('id','post'+id).addClass('boxee').html(tittle).prependTo('#boxer');                        
                        $('<img src="img/page-text-delete-icon.png" name="'+id+'">').attr({id:'postchk'+id,onclick: 'deletepost(this.name);'}).appendTo('#post'+id);                        
                        $('#tittle_ent').val('').focus();

                    }
                });
                return false;
            }
        });
    });

Answer 2

Да, Вы должны использовать функцию jQuery live (), более подробный пример можно найти здесь http://developerfaq.wordpress.com/2011/07/28/fire-event-on-dynamically-generated-dom-element-with-jquery/

Answer 3

'onclick' - это древний и старый стиль, особенно при использовании jquery.Попробуйте вместо этого вариант:

$('<img src="img/page-text-delete-icon.png" name="'+id+'">')
    .attr('id', 'postchk'+id)
    .click(function () { deletepost(this.name); })   /// use .click() instead.
    .appendTo('#post'+id);