Javascript JQuery document.ready中的多个事件处理程序

我正在使用JQuery/AJAX和SpringMVC构建web应用程序

我有一个html水平菜单，如下所示

<div id='cssmenu'>
<ul>
   <li class='active'><a href='${pageContext.request.contextPath}/add' class="navlink"><span>Add </span></a></li>
   <li><a href='${pageContext.request.contextPath}/update' class="navlink"><span>Update </span></a></li>
   <li><a href='${pageContext.request.contextPath}/delete' class="navlink"><span>Delete </span></a></li>
   <li><a href='${pageContext.request.contextPath}/deleteAll' class="navlink"><span>Delete All s</span></a></li>
</ul>
</div>
    <div id="endpoint" style="border:1px" >
      <form action="${pageContext.request.contextPath}/setEndPoint"
                  id="epform" method="post" >
      <p><label for="endPoint"> Set Endpoint: </label>
            <input id="endPoint" type="text" name="endPoint" size="75"/>
            <input value="Save" class="button" id="epsave" type="submit"/></p>
      </form>
      <p><span style="width:75"></span></p>
</div>
<div id='content' style="margin-top: 1cm;"></div>

然后，我有一个JQuery函数，它从服务器获取相应HTML页面的JQuery，并将结果加载到content div中

我还有一个额外的文本字段，它的值，我需要保存到一个spring控制器中的会话。文本字段值也是对应URL的ajax帖子，如下所示：

到目前为止，我使用的JQuery脚本如下

<script>
$(document).ready(function(){

      $('.navlink').click(function(e) {
            $("#cssmenu .active").removeClass("active");
            $(this).parent().addClass("active");
            e.preventDefault();
            $('#content').load( $(this).prop("href"));
            return true;
      });


$( "#epsave" ).bind("click", function(event){
      alert("Ajaxing ... ");

      event.preventDefault();

      $.ajax({
            url: $( this ).attr("action"),
            type: "POST",
            data: $( "#epform" ).serialize(),
            success: function(resp) {
                  console.log("What Respone?: " + resp);
                  $( "span" ).empty();
                  $( "span" ).text(resp).show();
            },
            error: function(err) {
                  $( "span" ).empty();
                  $( "span" ).text(err).show();
            }
      });
});
});
</script>

.navlink工作正常，它正在显示链接的页面，但是epsave函数不工作。epsave的ajax post没有将请求发布到服务器。html导航菜单本身会显示多次。我做错了什么？请帮忙

您必须处理提交事件，而不是单击。请尝试以下代码：

$( "#epform" ).submit(function(event){

  console.log("Ajaxing ... ");

  event.preventDefault();

  $.ajax({
        url: $( this ).attr("action"),
        type: "POST",
        data: $(this).serialize(),
        success: function(resp) {
              console.log("What Respone?: " + resp);
              $( "span" ).empty();
              $( "span" ).text(resp).show();
        },
        error: function(err) {
              $( "span" ).empty();
              $( "span" ).text(err).show();
        }
  });

});

在click handler$中，这是单击的按钮，而不是表单标记。因此，$this上没有action属性。改变

到

url: $( this ).attr("action"),

url: $( this ).parent().attr("action"),