Question

我正在通过循环在PHP中生成Bootstrap分页元素。

export class CmspageService {
  ServerUtl = "http://localhost/dev/blogger/";
  errorData : {};
  httpOptions = {
    headers:new HttpHeaders({'Content-Type':'application/json'})
  };
  constructor(private http : HttpClient) { }

  contactForm(formdata: Contact){
    console.log(formdata);
    return this.http.post<Contact>(this.ServerUtl+'api/contact',formdata,this.httpOptions).pipe(
      catchError(this.handleError)
    )
  }
  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {

      // A client-side or network error occurred. Handle it accordingly.

      console.error('An error occurred:', error.error.message);
    } else {

      // The backend returned an unsuccessful response code.

      // The response body may contain clues as to what went wrong.

      console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
    }

    // return an observable with a user-facing error message

    this.errorData = {
      errorTitle: 'Oops! Request for document failed',
      errorDesc: 'Something bad happened. Please try again later.'
    };
    return throwError(this.errorData);
  }
}

该元素生成正确：

<button class="page-link" data-page="'.$page_number.'">'.$page_number.'</button>

然后在我的脚本中，我需要获取此数据页以向前传递。

我正在尝试这样做：

<button class="page-link" data-page="1">1</button>

但是点击这些按钮只会给我

$('#taskcontainer').on("click", $(".page-link"), () => {
       console.log($(this).data("page"));  
    })

由于此分页元素是由PHP生成的，因此我绑定到#taskcontainer。

Answer 1

有两个问题：

您的委托处理程序代码不正确，您想传递 selector 而不是jQuery对象作为第二个参数。（请参见the documentation。）
您正在使用箭头功能。为了使jQuery设置this，您需要一个传统函数（this answer中有更多有关此函数的信息）。

所以：

$('#taskcontainer').on("click", ".page-link", function() {
// No $( and ) here ------------^^^^^^^^^^^^  ^^^^^^^^^^--- no arrow function here
   console.log($(this).data("page"));  
})

如果要继续使用箭头功能，则不能使用this，但是可以接受event参数并使用其currentTarget属性：

$('#taskcontainer').on("click", ".page-link", (event) => {
// No $( and ) here ------------^^^^^^^^^^^^  ^^^^^^^--- event parameter
   console.log($(event.currentTarget).data("page"));
// --------------^^^^^^^^^^^^^^^^^^^
})

另请参见this answer关于data与attr。

无法使用jQuery读取数据属性

1 个答案: