0

我正在尝试让 jQuery 识别返回的 ajax 数据。通过在 div 标签之间加载内容，我可以在页面加载时与 jQuery 进行交互，如下所示：

<div id="edit-features-id">
  include_partial(
    'user/favoritesEditFavorites', 
    array('vrs_allfav_data' => $vrs_allfav_data)
    );
</div>

这个 div 标签附加到一个 jQuery 对话框。为了让事情更有趣，对话框是由它之前的对话框打开的。为了解释，让我们调用第一个对话框（ ListView ）和第二个对话框（ EditMode ）。

因此，当页面加载时，include_partial 会在 div 标签之间加载 include_partial，因此当打开 EditMode 时，jQuery 会识别 jQuery 命令。它的工作原理是您可以删除、修改和重新排序数据，但在您单击保存之前什么都不会发生。

当您单击保存时，将使用 ajax 发布数据，更新数据库，如果成功返回警报确认。当警报关闭时，它会这样做：

  • 关闭 EditMode 对话框
  • 第一个函数更新 ListView 对话框 div 标签
  • 第二个函数更新 EditView 对话框 div 标签

由于 ListView 用于查看，因此它会加载已保存的新数据，这很好。这次 ListView 调用 EditMode 对话框时，没有任何东西与 jQuery 交互，因为您现在无法在 EditMode 中单击或排序。

返回的内容被加载到 EditMode 对话框 div 标记中，替换在页面加载时通过 partial_include 加载的当前 html 信息：

<div id="edit-features-id"></div>

我已经使用这些不同的方式成功加载了 div 标签之间的内容来获取 EditMode 的数据：

注意：我正在使用var $j = jQuery.noConflict(); 

favoritesReloadEditFavorites = function() {
  $j.ajax({
    url: favoritesEditFavoritesURL,
      cache: false
      }).done(function(html) {
      $j('#vrs_favorites_edit').append(html);
  });
};

或像这样：

$j('#vrs_favorites_edit').load(favoritesEditFavoritesURL);

或像这样：

$j.ajax({
  url: favoritesEditFavoritesURL,
  cache: false,
  success: function(response) {
    $j('#vrs_favorites_edit').html(response);
  };
});

正如你所注意到的，他们都转到了 favoritesEditFavoritesURL，它转换为这个 symfony 1.3.11 路由“user/favoritesEditFavorites”，它调用了这个动作：

if ($request->isXmlHttpRequest())
{
  // Retrieve data from db $vrs_allfav_data loaded into EditMode using renderPartial.
  return $this->renderPartial(
    'user/favoritesEditFavorites', 
    array('vrs_allfav_data' => $vrs_allfav_data)
  );
}

这非常适合加载内容，但不适用于需要与 jQuery 交互以允许单击和拖放功能的内容。

话虽如此，我能够找到解决 jQuery click 函数的解决方案，以允许它通过更改我的 jQuery .on 代码来开始工作：

$j('.cancelEditFavorites').on('click', function() {

对此：

$j(document).on('click', '.cancelEditFavorites', function() {

不幸的是，拖放 aka sortable 不起作用，它使用这个 jquery 插件jquery_sortable和下面的代码进行嵌套排序：

$j("ol.vertical").sortable({
    group: 'favorites',
    handle: '.handle',
    isValidTarget: function($item, container) {
        if ($item.is(".link")) {
            return true;
        } else {
            return $item.parent("ol")[0] == container.el[0];
        }
    },
    onDragStart: function($item, container, _super) {
        if ($item.is(".folder")) {
            $j('ol.vertical ol').sortable('disable');
            _super($item, container);
        }
    },
    onDrop: function($item, container, _super) {
        if ($item.is(".folder")) {
            $j('ol.vertical ol').sortable('enable');
            _super($item, container);
        }
    },
});

最后我的问题是，有没有办法从 ajax 或任何其他类型的调用加载数据，这些调用将被 dom 识别，从而允许它与 jQuery 交互，就像它在初始加载时一样，或者如果它是刷新的页？

刷新浏览器是可行的，但会导致两个对话框消失，让最终用户思考刚刚发生的事情，因为现在他们必须重新单击以打开第一个对话框以重新打开第二个对话框，这对我来说不是一个好的用户体验。

4

1 回答 1

0

要回答我自己的问题，它不起作用的原因是因为 Ajax 调用引入了 jQuery 无法使用的新数据，因为页面已经加载，因此我将 onclick 添加到加载的新内容的按钮中，当触发时被jQuery识别，从而解决了我的问题。

于 2013-09-16T04:00:04.517 回答