Question 252995 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Identify click event from common html element

I have one bootstrap card and on clicking on it I am redirecting the user to another page. Now I am adding some description on the same card with some character limit. Once the character limit exceeds, I am showing read more… I want when user clicks on read more, it will open a modal where they can read the full description and can also edit it if they want. The problem I am facing right now is, even when clicking on read more, its considering it a click on the card and redirecting the user to another page instead of opening the modal. How would I handle this case.

My HTML Code

<div id="someid" class="card tile-card estimate">
   <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
         <i class="fa fa-icon fa-solid fa-dollar-sign opacity-10"></i>
      </div>
      <div class="text-end pt-1">
         <p class="text-sm mb-0 tile-title-p">Some Text</p>
         <p class="text-xs mb-0 tile-subtitle-p">Some More Text</p>
         <p class="text-xs mb-0 tile-subtitle-p" style="font-weight:bold;">@EFITStatus</p>
         <p class="text-xs mb-0 tile-subtitle-p fifty-chars" style="text-align: left;" title="Description">
            Some fixed character description
         </p>
         <div style="display:inline-flex">
            <span class="tile-number-title"></span>
            <h3 class="tile-number mb-0"></h3>
         </div>
         <div style="display:inline-flex">
            <span class="tile-number-title"></span>
            <h3 class="tile-number mb-0"></h3>
         </div>
      </div>
   </div>
   <div class="card-footer p-3">
      <p class="tile-subtitle-p tile-subtitle-footer mb-0">Footer</p>
   </div>
</div>

On the first div element I have a class of name estimate on which I am calling an click event. when trying to call the click event of .readmore class, its still calling the first click event.

Below are my two independent functions.

For redirecting the user to another page

$('.estimate').on('click', function (item) {
                    var eFITID = $(this).data('efitid');
                    window.location.href = "my path";
            });

Below function is for character limit and opening the modal when user clicks on read more link

$(function () {
            var maxL = 20;
            $('.fifty-chars').each(function () {
                var text = $(this).text().trim();
                if (text.length > maxL) {
                    var begin = text.substr(0, maxL),
                        end = text.substr(maxL);

                    $(this).html(begin)
                        .append($('<a class="readmore"/>').html('read more...'))
                }
            });
            $(document).on('click', '.readmore', function (e) {
                $(this).next('.hiddenText').slideToggle(400);
                $("#modalEditDescription").modal('show');
            });
        });

How would handle this case. Any help would be much appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In order to fix that, as @Freedomn suggested, I removed the anchor tag and changed $(document).on('click', '.readmore', function... to $('.readmore').on('click', function.... Below is the working code.

    $(function() {
    var maxL = 20;
    $('.fifty-chars').each(function() {
        var text = $(this).text().trim();
        if (text.length > maxL) {
            var begin = text.substr(0, maxL),
                end = text.substr(maxL);

            $(this).html(begin).append('...')
                .append($('<i class="fa fa-edit readmore ml-2" style="color:#f84018"></i >'))

        } else {
            $(this).html(begin)
                .append($('<i class="fa fa-edit readmore ml-2" style="color:#f84018"></i >'))
        }
    });
    $('.readmore').on('click', function(e) {
        $("#modalEditDescription").modal('show');
        return false;
    });
});

  2. 0

    To handle the issue where clicking on "read more" is also triggering the card click event and redirecting the user, you can stop the propagation of the click event on the "read more" link. This prevents the click event from bubbling up to the card’s click event handler. You can achieve this by using the e.stopPropagation() function.

    Here’s the modified code:

    $('.estimate').on('click', function (item) {
    var eFITID = $(this).data('efitid');
    window.location.href = "my path";
});

// Function for character limit and opening the modal when user clicks on read more link
$(function () {
    var maxL = 20;
    $('.fifty-chars').each(function () {
        var text = $(this).text().trim();
        if (text.length > maxL) {
            var begin = text.substr(0, maxL),
                end = text.substr(maxL);

            $(this).html(begin)
                .append($('<a class="readmore"/>').html('read more...'))
                .append($('<div class="hiddenText"/>').text(end).hide()); // Add hidden text
        }
    });

    // Click event handler for "read more" link
    $(document).on('click', '.readmore', function (e) {
        e.stopPropagation(); // Stop the click event from propagating to the card
        $(this).next('.hiddenText').slideToggle(400);
        $("#modalEditDescription").modal('show');
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search