将点击分配给所有按钮，然后触发 ajax 更改 div 内容答案

【问题标题】：Assign click to all buttons and then trigger ajax to change div content将点击分配给所有按钮，然后触发 ajax 更改 div 内容
【发布时间】：2025-12-10 04:20:25
【问题描述】：

我有这个 html

    <body>
    <header>
      <img src="" alt="BANNER 200PX" />
    </header>
  <div class="contenedorBody">
    <nav id ="cssmenu">
      <ul>
        <li><a href="">Posts</a></li>
        <li><a href="">Eventos</a></li>
        <li><a href="">Noticias</a></li>
        <li class = "derecha"><a href="">Facebook</a></li>
        <li class = "derecha"><a href="">Twitter</a></li>
      </ul>
    </nav>
    <div class = "grilla">

      <div class = "col col-sidebar">
        <div class = "module">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.</p>
        </div>
      </div>

      <div class = "col col-content">
        <div class = "module" id = "36" name = "post">
          <h1>Titulo</h1>
            <div class = "col col-desc">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
              </p>
            </div>
            <div class = "col col-artwork">
              <img src="artwork.gif" class = "artwork">
            </div>
          <button class = "verFrame" value = "">Ver Frame</button> 
          <div id = "contenedorFrame"></div>
        </div>

        <div class = "module" id="7" name = "post">
          <h1>Titulo</h1>
            <div class = "col col-desc">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
              </p>
            </div>
            <div class = "col col-artwork">
              <img src="artwork.gif" class = "artwork">
            </div>
           <button class = "verFrame" value = "">Ver Frame</button>
          <div id = "contenedorFrame"></div>
        </div>        

      </div>

    </div>
  </div>
  <script src ="jquery-2.2.2.min.js" type="text/javascript"></script>
  <script src ="javascript.js" type="text/javascript"></script>
</body>

我想创建一个 jquery 函数来分配部分的所有 2 个按钮以触发 jquery 帖子以获取 iframe 的值并将其附加到

          <div id = "contenedorFrame"></div>

到目前为止，我的 jQuery 是这样的：

   $(document).ready(function() {
    $("#contenedorFrame").hide();
    console.log($(this).parent(".module").children("#contenedorFrame").length);
    $('.verFrame').click(function() {
        $("#contenedorFrame").toggle();
        if ($(this).parent(".module").children("#contenedorFrame").length) {
            $.post("get_frame.php", {
                    id: "7"
                })
                .done(function(respuesta) {
                    console.log("Entre");
                    $(this).parent(".module").find("#contenedorFrame").html(respuesta);
                });
        }
    });

});

我只想做一次 ajax 帖子，然后打开和关闭那个 div。

【问题讨论】：

你为什么在click处理程序之外使用$(this)？您希望它显示什么？
我想在单击的按钮 div 类模块中选择另一个元素
我说的是这条线：console.log($(this).parent(".module").children("#contenedorFrame").length);。你认为$(this)在那一行是什么，因为你不在点击处理程序中？
哦，那个，我只是用来调试一些东西，我忘了删除它

标签： javascript jquery html ajax post

【解决方案1】：

我将我的答案重写为 javascript 模块化揭示代码，这将帮助您编写可扩展的代码。

<body>
<header>
  <img src="" alt="BANNER 200PX" />
</header>
<div class="contenedorBody">
<nav id ="cssmenu">
  <ul>
    <li><a href="">Posts</a></li>
    <li><a href="">Eventos</a></li>
    <li><a href="">Noticias</a></li>
    <li class = "derecha"><a href="">Facebook</a></li>
    <li class = "derecha"><a href="">Twitter</a></li>
  </ul>
</nav>
<div class = "grilla">

  <div class = "col col-sidebar">
    <div class = "module">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.</p>
    </div>
  </div>

  <div class = "col col-content">
    <div class = "module" id = "36" name = "post">
      <h1>Titulo</h1>
        <div class = "col col-desc">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
          </p>
        </div>
        <div class = "col col-artwork">
          <img src="artwork.gif" class = "artwork">
        </div>
      <button class = "verFrame" value ="" onClick="module.clickButton(this)">Ver Frame</button> 
      <div id = "contenedorFrame"></div>
    </div>

    <div class = "module" id="7" name = "post">
      <h1>Titulo</h1>
        <div class = "col col-desc">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
          </p>
        </div>
        <div class = "col col-artwork">
          <img src="artwork.gif" class = "artwork">
        </div>
       <button class = "verFrame" value = "" onClick="module.clickButton(this)">Ver Frame</button>
      <div id = "contenedorFrame"></div>
    </div>        

  </div>

</div>

这是javascript代码

var module = (function(){
    function clickButton(that){
        toggleContenedorFrame(that);
        ajaxCallToUpdateDiv(that);
    }
    function ajaxCallToUpdateDiv(that){
        //do some ajax call
        $.post('somepage.php',{data:x},function(response){
            $(that).next().html(response);
        })
    }
    function toggleContenedorFrame(that){
        if($(that).next().text().length >= 0)
            $(that).next().toggle();
    }
    return {
        clickButton: clickButton
    }
})()

【讨论】：

让我知道这是否有帮助，因为我没有检查上面的代码只是试图修复 ajax 请求问题。
我会在我回家时测试它。但我认为问题出在我的 jquery elementos selectora
我觉得.done()函数应该等价于回调参数。
如果您需要任何修改和帮助，请告诉我。
我认为它不起作用，它弹出未定义模块

【解决方案2】：

这就是解决我的问题的方法。

    $(".grilla .verFrame").click(function(){
    if($(this).next().text().length <= 0) {
        $(this).next().load("get_frame.php", {id : $(this).attr("value")});
    }
    $(this).next().toggle();
});

【讨论】：

很高兴看到你找到它。我在业余时间写到一边，所以我没有看到你的帖子。

【解决方案3】：

我注意到的一件事是您的框架使用相同的Id，它们应该使用类。所有元素 Ids 必须是唯一的。

看起来你想要

点击按钮
从父模块获取id
发布到您的服务器
将内容注入.contenedorFrame

这样的事情可能会奏效。但是，我认为您的主要问题是没有使用 class 选择器。

$('.contenedorBody').on('click', '.verFrame', function() {
  var $this = $(this),
      $module = $this.parents('.module:first'),
      moduleId = $module.attr('id'),
      $frame = $module.find('.contenedorFrame');

  $.ajax({
    type: 'post',
    url: 'get_frame.php',
    data: {
      id: moduleId
    },
    success: function(data) {
      console.log('success');
      $('.contenedorFrame').hide();
      $frame.show().html(data);
    },
    error: function() {
      console.log('error');
    }
  });
});

【讨论】：