如何在javascript中执行回调+更新div标记

Question

我有一个ASP.NET MVC应用程序，其内容通过javascript/jquery/json从客户端加载到div中。加载的内容包含带有引用更新服务器端值的函数的标记，然后重定向到重新加载整个页面。

我希望用'something'代替a-tags，仍然调用服务器端函数，然后只重新加载div。

这样做的“正确”方式是什么？

温柔 - 我是新来的JS ;-)

都欢迎评论，

安德斯，丹麦

这是据我走到这一步。 getResponseCell（）返回一个填有标签的td标签。 我已经错位峡谷建议进入。点击（）此外，但它只是调用onClickedEvent ...

代码示例：

onClickedEvent=function() 
    { 
     return false; 
    } 

    getResponseCell=function(label, action, eventId) 
    { 
     tmpSubSubCell=document.createElement("td"); 
     link = document.createElement("A"); 
     link.appendChild(document.createTextNode(label)); 
     link.setAttribute("href", "/EventResponse/"+ action + "/" + eventId); 
     //link.setAttribute("href", "#divContentsEventList"); 
     //link.setAttribute("onclick", "onClickedEvent(); return false;"); 
     link.setAttribute("className", "eventResponseLink"); 


     link.click(onClickedEvent()); 

     // link=jQuery("<A>Kommer<A/>").attr("href", "/EventResponse/"+ action + "/" + eventId).addClass("eventResponseLink"); 
     // link.appendTo(tmpSubSubCell); 
     tmpSubSubCell.appendChild(link); 

     return tmpSubSubCell; 
    } 

---

这为我工作的解决方案看起来像这样的：

onClickedEvent=function(event, actionLink) 
    { 
      event.preventDefault(); 

      $("eventListDisplay").load(actionLink); 

      refreshEventList();     

      return false; 
    } 

    getResponseCell=function(label, action, eventId) 
    { 
     tmpSubSubCell=document.createElement("td"); 
     link = document.createElement("A"); 
     link.setAttribute("id",action + eventId); 
     link.appendChild(document.createTextNode(label)); 
     actionLink = "/EventResponse/"+ action + "/" + eventId; 
     link.setAttribute("href", actionLink); 
     className = "eventResponseLink"+ action + eventId; 
     link.setAttribute("className", className); 

     $('a.'+className).live('click', function (event) 
      { 
       onClickedEvent(event,$(this).attr('href')); 
      }); 

     tmpSubSubCell.appendChild(link); 

     return tmpSubSubCell; 
    } 

Answer 1

没有真正看到的更多信息.....

如果你是一个的被添加到DOM的初始页面加载后，您不能使用jQuery中通常click()或bind()方法;这是因为这些方法仅将事件绑定到在调用方法时在DOM中注册的那些元素。 live()另一方面，将为所有当前和将来的元素（使用JavaScript中的事件冒泡机制）注册事件。

$(document).ready(function() { 
    $('a.eventResponseLink').live('click', function (event) { 
     var self = $(this); 

     self.closest('div').load('/callYourServerSideFunction.asp?clickedHref=' + self.attr('href')); 

     event.preventDefault(); 
    }); 
}); 

我们使用event.preventDefault()来防止正在执行的a标签的默认动作;例如重新加载或更改页面。

编辑：这个问题不会造成这个问题。这是jQuery的强大功能;能够将相同的事件绑定到多个元素。检查你的HTML;也许你错过了关闭</a>某处？也许你把这个事件绑定到被多次调用的位置？每次调用.live()时，都会向所有匹配的元素添加ANOTHER事件处理程序。它只需要在页面加载时绑定一次。

jQuery为您提供了很多选择元素的方法;检查出list。看看你的链接变量，它看起来像你所有的链接有一个href从/EventResponse/开始;所以你可以使用$('a[href^=/EventResponse/]')作为选择器。

Answer 2

我们需要的代码给你一个正确的答案，但下面的代码将捕获的一个标签的点击，并重新加载它的里面的DIV：

$(document).ready(function() { 
    $("a").click(function() { 
     //call server-side function 
     var parentDiv = $(this).parents("div:first"); 
     $(parentDiv).load("getContentOfThisDiv.asp?id=" + $(parentDiv).attr("id")); 
    }); 
}); 

在上面的代码中，当一个链接被点击时，这个链接在里面的div将被加载对asp文件调用的响应。 div的id作为参数发送到文件。