2

我正在设计一个应用程序，其中您有连接，并且在页面一侧加载了挂起的连接请求列表。我遇到的问题是编写一个 jQuery 函数来接受请求并刷新页面上的 div 框。我不知道如何将连接请求的 id 传递给我的 jquery 函数，然后该函数将该 id 传递给我的视图以操作关联的对象。

这是我的 JS 代码：

function accept(id) {
  $.post("/accept/", function(json){
  alert("Was successful?: " + json['success']);
});

function addClickHandlers() {
  $("#accept").click( function() { accept(id) });
}
$(document).ready(accept);

这是我试图调用 JS 的 html：

      <table class="table table-condensed" style="margin-top:10px;">
    <tbody>
      {% for request in conReqs %}
      <tr>
        <td>
          <a href="#"><img src="{{ MEDIA_URL }}{{ request.creator.username }}<a onclick="accept({{ request.id }});">Accept</a> &middot; <i class="icon-thumbs-down"></i> <a href="#">Hide</a></p>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

当我单击接受时，没有任何反应。

4

2 回答 2

2

您不需要onlick属性，只需使用 jQuery 不显眼地附加事件处理程序。你也不应该有嵌套<a>标签。

function accept( id ) {

  $.post( "/accept/", function ( json ) {

    alert( "Was successful?: " + json[ 'success' ] );

  } );

}


function addClickHandlers() {

  $( ".accept" ).on( 'click', function ( event ) {

    event.preventDefault();

    accept( /\d+$/.exec( event.target.id )[0] );

  } );

}


$( document ).ready( function () {

  addClickHandlers();

  // If you really mean to call this at this point:
  accept();

} );


<table class="table table-condensed" style="margin-top:10px;">
  <tbody>
    {% for request in conReqs %}
    <tr>
      <td>
        <a href="#{{ request.id }}" class="accept"><img src="{{ MEDIA_URL }}{{ request.creator.username }}Accept</a> &middot; <i class="icon-thumbs-down"></i> <a href="#">Hide</a></p>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

事件处理

HTML：

<a href="" id="some-link">Some link</a>

JS：

$( document ).ready( function () {

  // Select element(s). In this case, the one element with the ID
  // "some-link". Call `on()` on the selected elements to register an
  // event listener, in this case for the `click` event. The second
  // argument to `on()` is the handler function, which will be called
  // when the event occurs and will be passed a jQuery Event object.

  $( "#some-link" ).on( 'click', function ( event ) {

    // This prevents the default action associated with the event on
    // the target element. In the case of a click event on an
    // `a[href]` element, the default action would be to load the URL
    // that the `href` resolves to.

    event.preventDefault();

    // One of the properties of the Event object is `target` -- the
    // element that the event occured on. In this case the target will
    // be an `a[href]` element, so I can read `event.target.href`. If
    // the `a` element had nested elements, `event.target` could be
    // the nested element. In that case, you could do
    // `$( event.target ).closest( "a" )` to make sure you get the `a`
    // element that the event occured within.

    // Here I'm running a regular expression on `event.target.href` to
    // get a sequence of digits at the end.

    var id = /\d+$/.exec( event.target.href )[0];

  } );

} );

对于您问题中的用例，代码可以浓缩为如下内容：

$( document ).ready( function () {

  $( ".accept" ).on( 'click', function ( event ) {

    event.preventDefault();

    var id = /\d+$/.exec( event.target.href )[0]; 

    $.post( "/accept/", { id : id }, function ( json ) {

      // ...

    } );

  } );

} );
于 2012-08-05T21:19:08.557 回答
2

您实际上并没有发布任何数据。调试 javascript 时确保控制台已打开，这将显示所有语法错误和请求。学习如何调试代码很重要。随意使用console.log以找出代码的哪些部分正在执行以及哪些部分没有执行。

您可以在 url 之后发布带有数据的对象的数据

var postData = {'id': id};
 $.post("/accept/", postData, function(json){

在您的 django 视图中，您可以通过以下方式访问 id

request.POST.get('id')

于 2012-08-05T21:28:11.923 回答