jquery添加内容不起作用

在我正在教自己的测试网页javascript和jquery &很快ajax库。我有一张桌子，下面显示一个编辑图像按钮。点击该图像后，左侧的文本被成功采集并复制到放置在其中的输入框中。但是，放置在编辑图像按钮位置的保存图像按钮不起作用，甚至没有简单的警报。这可以在http://jsfiddle.net/DVcFU/2/jquery添加内容不起作用

我是一个JavaScript初学者，因为你可能会猜到，所以我不确定我错了什么或接下来要做什么。我猜我必须做一些元素的初始化。任何帮助表示赞赏。

我使用jQuery-1.10.2

<script src="../java/jquery-1.10.2.js"></script>

的javascrip编辑功能

<script> 
$(document).ready(function(){ 
    //edit entry script 
    $(".edit_entry").click(function(){ 
      //gets the text from the textbox 
      var text = $(this).parent().prev().text(); 

      //replaces the textbox and edit button with an input box and save button 
      var html_code1 = "<input id='editing' type='text' value='" + text + "'>"; 
      var html_code2 = "<td><img src='/img/saveicon.png' class='save_entry' style='display:inline; cursor:pointer' border='0' alt='Save Entry'></td>"; 
      $(this).parent().prev().replaceWith(html_code1); 
      $(this).parent().html(html_code2); 
    }); 
}); 
</script>

的Javascript保存功能

<script> 
$(document).ready(function(){ 
    //save entry script 
    $(".save_entry").click(function(){ 
    alert("Hello World"); 
    }); 
}); 
</script>

^h TML

<table> 
    <tr> 
     <td><a href='www.google.com'>Generic link</a></td> 
     <td>Date</td> 
     <td>Time</td> 
     <td>Details</td> 
     <td><img src="/img/editicon.png" class="edit_entry" style="display:inline; cursor:pointer" border="0" alt="Edit Entry"></td> 
    </tr> 
</table>

来源

2013-08-20 Mason

为什么一个命名的文件夹在你的JavaScript'java' ... –

你有建议要放在哪里可能会被多个网页使用的JavaScript文件？或者你推断应该只是每个文件夹中使用的每个JavaScript文件的副本。 – Mason

不，就是这样，java与javascript无关。它们是两种非常不同的编程语言。并不是说它非常重要，它可能会让别人看到文件夹结构时感到困惑。 –

$(".save_entry").click()只有结合该事件存在的点时，该行是跑的元素。您需要为稍后添加的元素使用“委托”事件。

$(document).on('click', '.save_entry', function(){ 
    alert("Hello World"); 
});

来源

2013-08-20 17:12:16

谢谢，你的解释为我清除了一切。 – Mason

@梅森：不客气！ :-D –

您需要使用事件代表团

$(document).ready(function(){ 
    //save entry script 
    $(document).on('click', ".save_entry", function(){ 
    alert("Hello World"); 
    }); 
});

来源

2013-08-20 17:11:04

由于您使用生成的内容使用.on，如果你想在jQuery的一个动态的方式添加事件将结合事件对当前和新生成的内容

<script> 
$(document).ready(function(){ 
    //edit entry script 
    $(document).on("click",".edit_entry",function(){ 
      //gets the text from the textbox 
      var text = $(this).parent().prev().text(); 

      //replaces the textbox and edit button with an input box and save button 
      var html_code1 = "<input id='editing' type='text' value='" + text + "'>"; 
      var html_code2 = "<td><img src='/img/saveicon.png' class='save_entry' style='display:inline; cursor:pointer' border='0' alt='Save Entry'></td>"; 
      $(this).parent().prev().replaceWith(html_code1); 
      $(this).parent().html(html_code2); 
    }); 

    $(document).on("click",".save_entry",function(){ 
      alert("Hello World"); 
    }); 
}); 
</script>

来源

2013-08-20 17:13:01

，然后在我的经验最简单的就是使用.on()方法。

与您的示例相比，该方法只有一些非常简单的差异。

您的代码应该是这样的，以达到你的目标：

$(document).on("click", ".save_entry", function() { 
    alert("Hello World"); 
});

代替：

$(".save_entry").click(function() { 
    alert("Hello World"); 
});

来源

2013-08-20 17:22:06 tormex

jquery添加内容不起作用

回答

相关问题